アクティブセクションをアコーディオンに設定する

Question

アコーディオン内にアクティブセクションを設定しようとしています。私はこれを行う方法を理解するのに多くの困難を抱えています。私は疲れを捜し、私の特定の事件の解決策を見つけられませんでした。それは非常にストレートなようだが、私はそれを把握できません。助けてください！

（私の意図は、マスターページ上でこのリストを入れて、に移動するとき、アクティブセクションを設定し、各コンテンツページを持つことがある。）

私はjsFiddleに私のアコーディオンリストが保存されている：http://jsfiddle.net/pWbxm/14/

**代替DIV /ヘッダ・フォーマットを使用jsFiddleにアコーディオンリスト：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タグとheaderタグを使用して3次ナビメニューに作業することはできましたが、ulタグではできませんでした。それはulリストの第1レベルと第2レベルのみを認識するようです。

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>