jQuery slideToggle加倍......?

时间:2017-03-24 15:42:58

标签: javascript jquery mobile

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

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();
}); 

2 个答案:

答案 0 :(得分:0)

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

&#13;
&#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;
&#13;
&#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/