jQuery：toggleClass 不适用于下拉菜单答案

【问题标题】：jQuery: toggleClass Not Working for DropdownjQuery：toggleClass 不适用于下拉菜单
【发布时间】：2014-10-21 20:56:52
【问题描述】：

我正在使用 toggleClass 创建一个下拉菜单，该菜单在单击父菜单项时向下和向上滑动。它适用于向下滑动菜单，但是当我再次单击父菜单项时，下拉菜单不会向上滑动。

jQuery:

$(document).on('click', '#navpanel .mainnav a[href^="/#"]', function(e) {
if ($(this).parent('li').hasClass('expanded')) {
    $(this).siblings('ul').css('display', 'block').slideDown('linear', function() {
        $(this).parent('li').toggleClass('expanded');

    });
} else {
    $(this).siblings('ul').css('display', 'none').slideUp('linear', function() {
        $(this).parent('li').toggleClass('expanded');
    });
}
var objHeight = 0;
$.each($('ul.tier1').children(), function() {
    objHeight += $(this).height();
});
$('ul.tier1').height(objHeight);
});

HTML：

<div class="mainnav">
<ul class="tier1">
    <li id="blog">blog</li>
    <li class="">
        <a class="tier1title" href="/collections/newarrivals">New Arrivals</a>
    </li>
    <li class="">
        <a class="tier1title" href="/#">Categories</a>
        <ul class="tier2">
            <li class="">
                <a href="/collections/knits">Knits</a>
            </li>
            <li class="">
                <a href="/collections/tops">Tops</a>
            </li>
            <li class="">
                <a href="/collections/dresses">Dresses</a>
            </li>
            <li class="">
                <a href="/collections/bottoms">Bottoms</a>
            </li>
            . . .
            <li class="">
                <a class="tier1title" href="/collections/sale">Sale</a>
            </li>
            <li class="registerform">
                ...
            </li>
        </ul>
    </li>
</ul>
</div>

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案1】：

我认为这将解决您遇到的一些问题。

HTML：

 <!DOCTYPE html>
     <head>
     <style>

        .mainnav .tier1 > li > ul { display: none; }

        .mainnav .tier1 > .expanded > ul { display: block; }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <div id="navpanel">
            <div class="mainnav">
                <ul class="tier1">
                    <li id="blog">blog</li>
                    <li class="">
                        <a class="tier1title" href="/collections/newarrivals">New Arrivals</a>
                    </li>
                    <li class="">
                        <a class="tier1title" href="/#">Categories</a>
                        <ul class="tier2">
                            <li class="">
                                 <a href="/collections/knits">Knits</a>
                            </li>
                            <li class="">
                                 <a href="/collections/tops">Tops</a>
                             </li>
                        </ul>
                    </li>
            </ul>
        </li>
    </ul>
</div>
 </div>
 </body>
  </html>

代码：

 $(document).on('click', '#navpanel .mainnav a[href^="/#"]', function(e) {
      console.log(this);
      if ($(this).parent('li').hasClass('expanded') === true) {
           // start doing a slideUp animation and then remove the class expended
             $(this).siblings('ul').slideUp('linear', function() {
                 $(this).removeAttr('style'); // remove style="display: none;"
                      $(this).parent('li').removeClass('expanded');
             });

      } else {
         $(this).siblings('ul').slideDown('linear', function() {
            $(this).removeAttr('style'); // remove style="display: block;"
            // and use the css declaration:
            // .mainnav .tier1 > .expanded > ul { display: block; }
            // to prevent RWD issues
            $(this).parent('li').addClass('expanded');

        });
    }
    /*
    // Set temporaly in comment
    // does not see the practical use of setting a static height.
    var objHeight = 0;
    $.each($('ul.tier1').children(), function() {
        objHeight += $(this).height();
    });
    $('ul.tier1').height(objHeight);
    */
});

【讨论】：

【解决方案2】：

这对我有用

$(document).on('click', '#navpanel .mainnav a[href^="/#"]', function(e){
if($(this).parent('li').hasClass('expanded')) {  
  $(this).siblings('ul').css('display', 'block').slideDown('linear', function(){
    $(this).toggleClass('expanded');
    $('ul.tier1').css('height', '50px');
  });
} else {
  $(this).siblings('ul').css('display', 'none').slideUp('linear', function(){
  $(this).toggleClass('expanded');
   $('ul.tier1').css('height','auto');
  });
} 
e.preventDefault();
});

【讨论】：