jQuery切换下拉菜单

本文介绍了jQuery切换下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述

我怎样才能写出一段jQuery，当点击 Trials 时，它会显示下拉菜单选项：
>更新：
  jQuery（document）.ready（function（）{
 
 $（a [href ='http：//sheep.local/cms/trials']）.click（function（e）{
 e.preventDefault（）; //如果你不想要打开链接... 
 $（this）.next（'ul'）。slideToggle（）; 
}）; 
}）; 
  
 $ b   HTML：  
 
 
 < div id =mainnavwrap> 
< div id =mainnavclass =clearfix> 
< ul class =menu> 
< li class =first current> 
< a href =http：//sheep.local/cms/home>主页< / a> 
< / li> 
< li> 
< a href =http：//sheep.local/cms/features>功能< / a> 
< / li> 
< li> 
< a href =http：//sheep.local/cms/options>选项< / a> 
< / li> 
< li> 
< a href =http：//sheep.local/cms/pumps-motors> Pumps&电动机及LT; / A> 
< / li> 
< li> 
< a href =http：//sheep.local/cms/shows>显示< / a> 
< / li> 
< li> 
< a href =http：//sheep.local/cms/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>联络人< / 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 li li {
 width：185px; 
 padding：5px 0 5px 5px; 
 border-top：1px虚线＃424242; 
 border-bottom：0px; 
} 
 #wrapper #contentarea #blue_box .centerblue_txt ul li li a，
 #wrapper #contentarea #blue_box .centerblue_txt ul li 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 li li＃current a，
 #wrapper #contentarea #blue_box .centerblue_txt ul li 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; 
} 
  
 
 
解决方案
请看这篇文章的代码： 
点击'deelnemers '为理想效果。
 
 
编辑：我将它调整到您的代码：
  
 
How could I write a section of jQuery so that when Trials is clicked that it will show the dropdown menu options:
Update:
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;
}
 解决方案 
Take a look at this piece of code: http://jsfiddle.net/G9kda/6/Click 'deelnemers' for the desired effect.
EDIT: I adjusted it to your code:http://jsfiddle.net/hXNnD/1/
                        这篇关于jQuery切换下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！