手风琴内手风琴折叠父母手风琴

我正在使用jqueryui的手风琴控制。我需要在手风琴中设置涉及手风琴的导航。它看起来喜欢它建立所有的手风琴没关系。我展开第一个，看第二个。当我展开第二个，我看到它扩大了，但随后它的母手风琴卷起并隐藏了我刚扩大的孩子手风琴。手风琴内手风琴折叠父母手风琴

这codepen显示我的问题：http://codepen.io/chodenode/pen/Evnsz

任何帮助非常感谢：

我的HTML：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"> 
<body> 
    <ul id="navigation"> 
     <li class="parent-li"> 
      <span class="topic"><a href="">Cardiac</a></span> 
      <span class="header"></span> 
      <ul> 
       <li class="parent-li"> 
        <span class="topic">Coronary Atherosclerosis</span> 
        <span class="header"></span> 
        <ul> 
         <li> 
          <a href="">Clinical Outcome Profile</a> 
          <span class="header"></span> 
          <ul> 
           <li>Coronary Atherosclerosis Per 1000 ACA</li> 
           <li>Coronary Atherosclerosis Comorbidity</li> 
           <li>Coronary Atherosclerosis % with PTCA</li> 
           <li>Coronary Atherosclerosis Mortality Rate</li> 
          </ul> 
         </li> 
         <li> 
          <a class="parent" href="">MS-DRG Care Management Profile</a> 
          <span class="header"></span> 
          <ul> 
           <li>MS-DRG 286 Circulatory disorders except AMI w card cath w MCC</li> 
           <li>MS-DRG 302 Atherosclerosis w MCC</li> 
           <li>MS-DRG 303 Atherosclerosis w/o MCC</li> 
           <li>MS-DRG 304 Hypertension w MCC</li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li class="parent-li"> 
        <span class="topic">Chest Pain</span> 
       </li> 
       <li class="parent-li"> 
        <span class="topic">Angina</span> 
       </li> 
      </ul> 
     </li> 
     <li class="parent-li"> 
      <span class="topic">Vascular</span> 
      <span class="header"></span> 
      <ul></ul> 
     </li> 
     <li class="parent-li"> 
      <span class="topic">Respiratory</span> 
      <span class="header"></span> 
      <ul></ul> 
     </li> 
    </ul> 
</body>

我的代码：

$(document).ready(function() { 
    $('#navigation').accordion({ 
     header: '.header', 
     event: 'click', 
     collapsible: true, 
     heightStyle: 'content', 
     active: false, 
     fillSpace: true, 
    }); 

    $('a').click(function(event) { 
     event.preventDefault(); 
    }); 
});

来源

2013-02-26 user2111971

你能详细解释一下有什么问题吗？ – 2013-02-26 16:56:23

是https://stackoverflow.com/a/14616985/1847695任何帮助。

它看起来像每个嵌套手风琴是<div>标签内，则JavaScript是：

$("div.accordian").accordion({ <options> });

这是关于我还没有尝试过在你的codepen样品的唯一选择。

来源

2013-02-26 17:00:35 Tom

我只是试图把我所有的UL都放到一个div中，这似乎没有帮助。当我点击其中一个较低级别的手风琴时，它们仍会卷起。这个问题似乎围绕使用header属性。点击与头部内容相同的属性会触发崩溃事件，即使它进一步下降。我使用不同的id来尝试上述人的解决方案，但也为header属性使用不同的类，并将它们分离出来。 – user2111971 2013-02-26 18:29:51

我可以让subaccordians类似于昨天链接到的另一个codepen示例，但在jsFiddle中播放我无法生成任何您需要的内容，对不起。 – Tom 2013-02-27 12:42:23

您需要为分手风琴制作单独的id和header。通过使用相同的id和header jQuery正在崩溃的一切在同一时间。

下面应该让你在正确的轨道上......我只是复制原来的手风琴声明，并用sub_前缀

$(document).ready(function() { 
$('#navigation').accordion({ 
    header: '.header', 
    event: 'click', 
    collapsible: true, 
    heightStyle: 'content', 
    active: false, 
    fillSpace: true, 
}); 
$('#sub_navigation').accordion({ 
    header: '.sub_header', 
    event: 'click', 
    collapsible: true, 
    heightStyle: 'content', 
    active: false, 
    fillSpace: true, 
});

更新它，然后更新HTML以反映脚本修改：

<body> 
<ul id="navigation"> 
    <li class="parent-li"> 
     <span class="topic"><a href="">Cardiac</a></span> 
     <span class="header"></span> 
     <ul> 
      <li id="sub_navigation" class="parent-li"> 
       <span class="topic">Coronary Atherosclerosis</span> 
       <span class="sub_header"></span>

来源

2013-05-24 12:11:19 CEN7272

手风琴内手风琴折叠父母手风琴

回答

相关问题