以手風琴設置活動部分

Question

我試圖在手風琴內設置活動部分。我很難搞清楚如何做到這一點。我不知疲倦地搜索，沒有找到解決我的具體案例。這看起來非常直截了當，但我無法弄清楚。請幫忙！

（我的意圖是把在母版這個名單，並讓每個內容頁面設置活動部分時，導航到。）

我救了我的手風琴名單的jsfiddle：http://jsfiddle.net/pWbxm/14/

**備用上的jsfiddle手風琴列表中，使用了DIV /頭格式：http://jsfiddle.net/hemiar/44UTR/

HTML：

<ul class="leftNavMenu"> 
    <li><a href="#" title="#">Home</a></li> 
     <li><a href="#" title="#">HR + Benefits</a> 
      <ul> 
       <li><a href="#">HR Main</a></li> 
       <li><a href="#">Policies</a></li> 
       <li><a href="#">Benefits</a></li> 
       <li><a href="#">Forms</a></li> 
       <li><a href="#">Employee Handbook</a></li> 
       <li><a href="#">Managers</a></li>  
      </ul> 
     </li>  
     <li><a href="#" title="#">Departments</a> 
      <ul> 
       <li><a href="#">Accounting</a> 
       <ul> 
       <li><a href="#">Accounting Main</a></li> 
       <li><a href="#">Draft Dates</a></li> 
       <li><a href="#">Forms</a></li> 
       <li><a href="#">InfoSend</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Acquisitions</a> 
      <ul> 
       <li><a href="#">Acquisitions Main</a></li> 
       <li><a href="#">Bulk Acquisitions</a></li> 
       <li><a href="#">Dealer Program Acquisitions</a></li> 
       <li><a href="#">Training Manual</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href="#" title="#">Contacts</a> 
     <ul> 
      <li><a href="#">Contacts Home</a></li> 
      <li><a href="#">SAFE Phone List</a></li> 
      <li><a href="#">CSAI Phone List</a></li> 
      <li><a href="#">DND Codes</a></li> 
      <li><a href="#">Phone User Guides</a></li>  
     </ul> 
    </li> 
</ul> 

CS S：

.leftNavMenu{width: 195px;} 

ul.leftNavMenu{line-height: 0.5em;} 

ul.leftNavMenu ul{ 
    margin: 0; 
    padding: 0; 
    display: none;} 

ul.leftNavMenu li{ 
    list-style: none; 
    font-size:10px;font-weight:bold; 
    color:#1D65B3; 
    border-bottom:inset; 
    border-width:1px; 
    border-bottom-color:#BDD1E6;} 

ul.leftNavMenu li a{ 
    line-height: 10px; 
    padding: 10px 5px 5px 10px; 
    display: block;} 

ul.leftNavMenu li a:hover{ 
    background-color:#ffffff; 
    color:#1D65B3;} 

ul.leftNavMenu ul li{ 
    margin: 0; 
    padding: 0; 
    clear: both; 
    font-family:Verdana, "Segoe UI"; 
    font-size:9px;font-weight:bold; 
    background-color:#D5E6F8; 
    color:#ffffff;} 

ul.leftNavMenu ul li a{ 
    padding-left: 15px; 
    outline:0;} 

ul.leftNavMenu ul li a:hover{ 
    background-color:#ffffff; 
    color:#1D65B3;} 

ul.leftNavMenu ul ul li{  
    background-color:#ffffff; 
    color:#1D65B3; 
    border-bottom-style:dotted;} 

ul.leftNavMenu ul ul li a{ 
    font-size:9px;font-weight:normal; 
    padding-left: 30px;} 

ul.leftNavMenu ul ul li a:hover{ 
    background-color:#E8EFF7; 
    color:#1D65B3;} 

ul.leftNavMenu span{ 
    float:right;} 

的JScript

 $(document).ready(function() { 
     $('li').click(function(ev) { 
      $(this).find('>ul').slideToggle('slow') 
       .end().siblings().find('ul').slideUp('slow'); 
      ev.stopPropagation(); 
     }); 
    }); 
    var accordion = $('ul.leftNavMenu'); 
    accordion.accordion('activate', 2); 

Answer 1

看來這個問題已經開放了幾年了。我能夠使用div和標籤使其工作到第三級導航菜單，但不能使用ul標籤。它似乎只會識別ul列表中的第一個和第二個等級。

Answer 2

的jQuery UI的手風琴的設計與在文檔中顯示的HTML工作。我不認爲它會與<ul><li>標籤一起使用。

你也許應該看看重寫你的html來使用它們的標記。例如

<div id="accordion"> 
    <h3><a href="#section1">Section 1</a></h3> 
    <div> 
     <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> 
    </div> 
    <h3><a href="#section2">Section 2</a></h3> 
    <div> 
     More Content Here 
    </div> 
</div>