jquery ui手风琴在单击另一个时避免关闭项目答案

【问题标题】：jquery ui accordion avoid closing item wnen clicking on another onejquery ui手风琴在单击另一个时避免关闭项目
【发布时间】：2012-10-29 10:09:46
【问题描述】：

从现有的小提琴开始，我创建了这个示例：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 部分，手风琴正确打开，但我希望点击其他项目，以前打开的项目不会关闭。我怎样才能获得这种行为？谢谢

【问题讨论】：

标签： javascript jquery jquery-ui accordion

【解决方案1】：

您不应该将 jquery 手风琴用于这种目的。但是，覆盖任何元素事件行为相对容易。初始化手风琴时，您只需将点击处理程序覆盖到相应的元素。

在你的情况下，这给出了这样的东西：

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

查看工作jsFiddle

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

$(".xyz").accordion({ 可折叠：true，
活动：false， heightStyle: "内容", 图标：“”， });

【讨论】：