2012-03-18 6 views
1

jQueryのトグルドロップダウンメニュー<strong>試験</strong>が、それは、ドロップダウンメニューオプションが表示されますことをクリックしたときにように私はjQueryののセクションを書くことができますどのように

更新:

jQuery(document).ready(function() { 

    $("a[href='http://sheep.local/cms/trials']").click(function(e){ 
     e.preventDefault(); // In case you don't want the link to open... 
     $(this).next('ul').slideToggle(); 
    }); 
});​ 

HTML:

 <div id="mainnavwrap"> 
      <div id="mainnav" class="clearfix"> 
    <ul class="menu"> 
    <li class="first current"> 
     <a href="http://sheep.local/cms/home">Home</a> 
    </li> 
    <li> 
     <a href="http://sheep.local/cms/features">Features</a> 
    </li> 
    <li> 
     <a href="http://sheep.local/cms/options">Options</a> 
    </li> 
    <li> 
     <a href="http://sheep.local/cms/pumps-motors">Pumps & Motors</a> 
    </li> 
    <li> 
     <a href="http://sheep.local/cms/shows">Shows</a> 
    </li> 
    <li> 
     <a href="http://sheep.local/cms/trials">Trials</a> 
     <ul> 
      <li class="first"> 
       <a href="http://sheep.local/cms/trials/mathews-trial">Mathews Trial</a> 
      </li> 
      <li> 
       <a href="http://sheep.local/cms/trials/novatis-trial">Novatis Trial</a> 
      </li> 
      <li> 
       <a href="http://sheep.local/cms/trials/waimati-vet-trial">Waimati Vet Trial</a> 
      </li> 
      <li class="last"> 
       <a href="http://sheep.local/cms/trials/uk-scab-mite-trial">UK Scab Mite Trial</a> 
      </li> 
     </ul> 
    </li> 
    <li class="last"> 
     <a href="http://sheep.local/cms/contact">Contact</a> 
    </li> 

    </ul> 
</div> 
      </div> 

CSS:

#wrapper #contentarea #blue_box .centerblue_txt ul li ul{ 
    width:190px; 
    padding:5px 0 0 10px; 
    display:none; 
} 
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li{ 
    width:185px; 
    padding:5px 0 5px 5px; 
    border-top:1px dotted #424242; 
    border-bottom:0px; 
} 
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li a, 
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li a{ 
    width:180px; 
    padding:0 0 0 10px; 
    font-size:12px; 
    background:url(../img/liBullets.gif) no-repeat left 4px; 
} 
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li#current a, 
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li a:hover{ 
    color:#D1D1D1; 
    background:url(../img/liBullets.gif) no-repeat left 4px; 
} 
#wrapper #contentarea #blue_box .centerblue_txt ul li a:hover, 
#wrapper #contentarea #blue_box .centerblue_txt ul li a:active { 
    background:#5490f3; 
} 

答えて

0

あなたは(のみトライアル用)このようなものを使用することができ

$("a[href='http://sheep.local/cms/trials']").click(function(e){ 
    e.preventDefault(); // In case you don't want the link to open... 
    $(this).nextAll('ul').slideToggle(); 
}); 
+0

ねえ、私は含まれています:私はあなたのコードにそれを調整します私の質問では、それは読み込まれているか作業していないようです。何か案は? –

+0

正しいことですが、.next( 'ul')に問題があり、適切な要素が選択されていない場合は、代わりに '.nextAll'を使用してください。 – aurbano

+0

Nope :(http://cl.ly/3o3M1u2e1X3f393c370T&I am getting firebugで何もなし –

関連する問題