手風琴內手風琴摺疊父母手風琴

我正在使用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

手風琴內手風琴摺疊父母手風琴

回答

相關問題