jQuery UI手风琴避免在单击其他项目时关闭当前项目

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 );
    });
});​

如果我点击“Section 1”，折叠面板会正确打开，但我希望在点击其他项目时，之前打开的项目不会关闭。我该如何实现这种行为呢？ 谢谢。

- Fseee

Answer 1

您不应该使用jquery手风琴来实现此种目的。但很容易覆盖任何元素事件的行为。当手风琴被初始化时，您只需要覆盖对应元素的单击处理程序即可。

在您的情况下，可以这样做:

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

请参考这个jsFiddle链接以了解示例代码。

- A. Wolff

Answer 2

我认为手风琴插件可能不是最好的选择，但你可以采取以下措施：

你可以将id改为class，并使用手风琴作为类，然后多个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>

- xpros

Answer 3

$(".xyz").accordion({ 可折叠: true,
默认关闭: false, 高度样式: "内容", 图标:"", });

- Shobhan

Answer 4

也许你需要另一个插件来实现折叠/展开功能？例如this（请参见页面底部的示例）

- Dis Shishkov