我正在为此网站制作移动菜单:
http://giamberardino.com/_beta/team.html
当我点击" Showcase"它会切换整个菜单的幻灯片以及.mbl-dropdown。我想在单击.mbl-showcase时切换.mbl-dropdown的幻灯片。
我哪里错了?
<nav class="mobile_menu">
<ul id="menuItems">
<li><a href="index.html"> Home</a> </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li><a href="#">General Contracting</a></li>
<li><a href="#">CUSTOMIZED MILLWORK</a></li>
<li><a href="#">BUILDING RESTORATION</a></li>
</ul>
</li>
<li><a href="team.html" class="active"> Team </a></li>
<li><a href="careers.html" >Careers </a></li>
<li><a href="contact.html"> Contact</a></li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});
答案 0 :(得分:0)
首先,你必须在脑海中说清楚: 你必须隐藏整个导航栏的下拉菜单 NOT ,所以你需要给.mbl-dropdown一个display:none。 那么你只想制作那样的jquery代码:
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
&#13;
.mbl-dropdown{
display:none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li><a href="index.html"> Home</a> </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li><a href="#">General Contracting</a></li>
<li><a href="#">CUSTOMIZED MILLWORK</a></li>
<li><a href="#">BUILDING RESTORATION</a></li>
</ul>
</li>
<li><a href="team.html" class="active"> Team </a></li>
<li><a href="careers.html" >Careers </a></li>
<li><a href="contact.html"> Contact</a></li>
</ul>
</nav>
&#13;
这意味着如果你点击带有类的元素.mbl-showcase是&#34; Showcase&#34;下拉列表会显示它是否隐藏,如果显示它将被隐藏,切换意味着什么。
请务必再次检查切换属性http://api.jquery.com/toggle/ 我希望我帮助你
答案 1 :(得分:0)
<nav class="mobile_menu">
<ul id="menuItems">
<li><a href="index.html"> Home</a> </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li><a href="#">General Contracting</a></li>
<li><a href="#">CUSTOMIZED MILLWORK</a></li>
<li><a href="#">BUILDING RESTORATION</a></li>
</ul>
</li>
<li><a href="team.html" class="active"> Team </a></li>
<li><a href="careers.html" >Careers </a></li>
<li><a href="contact.html"> Contact</a></li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/