jQuery Accordion breaks after first click when active: false is set_问答_开发者

jQuery Accordion breaks after first click when active: false is set

开发者 https://www.devze.com 2023-02-04 11:45 出处：网络

I\'ve had a jQuery accordion on my site for a bit now, and it seemed to be working fine until I checked on it today and it is broken. I haven\'t touched the HTML in weeks. I\'ve gone through the accor

I've had a jQuery accordion on my site for a bit now, and it seemed to be working fine until I checked on it today and it is broken. I haven't touched the HTML in weeks. I've gone through the accordion documentation all over again, and it doesn't seem anything has changed, so I have no clue what is going on.

I had the accordion "active" property set to "false", so that the accordion would not display an active section on document load. I also had "collapsible" set to "true", like the documentation specified. Just to be sure it wasn't another element on the page, I created a whole new page with just the most basic accordion elements on it, and it still won't work.

The problem is that, after clicking on the first accordion section, clicking on any of the other ones doesn't work- you're stuck with that section open. I noticed that removing the "active" property altogether fixed this problem, but then of course there is an active section open on document load, which I don't want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
  $(document).ready(function() {
    $("#accordion").accordion({active: false, alwaysOpen: true, autoHeight: false, collapsible: true});
  });
</script>
</head>
<body>
<div id="accordion">

    <p><a href="#">1</a></p>
    <div>this</div>

    <p><a href="#">2</a></p>
    <div>isn't</div>

    <p><a href="#">3</a></p>
    <div>working</div>

    <p><a href="#">4</a></p>
    <div>correctly</div>

</div>
</body>
</html>

I also noticed that if I remove active: false, and leave collapsible: true, I am only able to "collapse" a section twice, and then the same thing hap开发者_Go百科pens- the sections lock up and stop collapsing/opening.

Well, I immediatly saw the following problem:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

By not specifying the revision (last third digit in the version) you will automatically get served the latest version of both jQuery and jQuery UI. So why it suddenly stopped working for you was because jQuery UI got updated, and changes were made to the UI Accordion.

Best way to solve this is to specify the revision. Walk down from the current version (1.8.7) and downwards until it's working for you. For example, the alwaysOpen open have been removed or changed. You should check the docs and see which options are available.

Also, you can try this which I've got working on jsFiddle:

$(function(){
    $("#accordion").accordion({
        active: false,
        autoHeight: false,
        collapsible: true
    });
});

heightStyleType

Controls the height of the accordion and each panel. Possible values:

"auto": All panels will be set to the height of the tallest panel.
"fill": Expand to the available height based on the accordion's parent height.
"content": Each panel will be only as tall as its content.

Code example:

$(function(){
    $("#accordion").accordion({
       active: false,
       heightStyle: "content",
       collapsible: true
    });
});

jQuery Accordion breaks after first click when active: false is set

精彩评论

关注公众号

热门标签

图文推荐

jQuery Accordion breaks after first click when active: false is set

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：