jQuery UI的手风琴避免关闭项目wnen点击一个又一个(jquery ui accordion

从现有的小提琴开始，我创建了这个示例： http://jsfiddle.net/2DaR6/90/

这里的html代码：

<div id="accordion">
  <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3>
    <div> Good Morning Stackoverflow</div>
  <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3>
    <div>Buongiorno Stackoverflow</div>
  <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3>
    <div>Bonjour Stackoverflow</div>
</div>

和这里的JS代码：

$(function() {
    var icons = {
        header: "ui-icon-circle-arrow-e",
        headerSelected: "ui-icon-circle-arrow-s"
    };
    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true
    });
    $( "#header1" ).click(function() {
        $( "#accordion" ).accordion( "option", "icons", false );
    }, function() {
        $( "#accordion" ).accordion( "option", "icons", icons );
    });
});

如果我点击第1节，手风琴正确打开，但我要的是点击其他项目，之前打开的项目将不会关闭。我怎样才能获得这种行为？谢谢

Answer 1:

你不应该使用jQuery的手风琴这种目的。然而，它比较容易忽略的任何元素的事件的行为。当手风琴被初始化，你就必须重写单击处理程序对应的元素。

在你的情况，这让这样的事情：

$('#accordion .accClicked')
        .off('click')
    .click(function(){
        $(this).next().toggle('fast');
    });

见工作的jsfiddle

Answer 2:

我同意，手风琴可能不是用最好的插件，但你可以做到以下几点：

你可以使用一个id改变和使用手风琴为一类，然后有多个div来打破你的部分了。

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(function() { $( ".accordion" ).accordion({collapsible: true, active: false}); }); </script> <div class="accordion"> <h3>header 1</h3> <p>this is my content 1</p> </div> <div class="accordion"> <h3>header 2</h3> <p>this is my content 2</p> </div>