Question

我正在为此网站制作移动菜单：

http://giamberardino.com/_beta/team.html

当我点击＆＃34; Showcase＆＃34;它会切换整个菜单的幻灯片以及.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();
});

Answer 1

首先，你必须在脑海中说清楚：你必须隐藏整个导航栏的下拉菜单 NOT ，所以你需要给.mbl-dropdown一个display：none。那么你只想制作那样的jquery代码：

＆＃13;

$(".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/ 我希望我帮助你

Answer 2

<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/

jQuery slideToggle加倍......？

2 个答案: