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：“內容”，圖標：“”，}）；