jQuery ui手风琴避免关闭项目wnen单击另一项

Question

从现有的小提琴开始，我创建了此示例： 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手风琴用于这种目的。 但是，它相对容易覆盖任何元素事件行为。 初始化手风琴后，您只需要将click handler覆盖到相应的元素即可。

您的情况如下：

$('#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> 

Answer 3

可能您需要另一个插件折叠/展开吗？ 例如本 （见页面底部的例子）

Answer 4

$（“。xyz”）。accordion（{ 可折叠：true，
主动：false， heightStyle：“内容”，图标：“”，}）；