切换班级后将高度设置回0

Question

我有以下 HTML 和 JS。当您单击.slidedown-toggle 时，它会在其父级 (.slidedown) 上切换类“打开”并将高度应用于其兄弟级 (.nav-sub)。这是有效的，但是当“开放”类不存在时，将高度设置回 0 是无效的。我错过了什么？

HTML

<li class="slidedown">
  <a href="#">Parent Link</a>
  <!-- Dropdown arrow -->
  <span class="slidedown-toggle">
    <span class="caret"></span>
  </span>
  <!-- Submenu -->
  <ul class="nav nav-sub">
    <li>
      <a href="#">Child Menu Item 1</a>
    </li>
  </ul>
</li>

JS

$(function navCollapse(){

  var slidedownToggle = $( '#global-nav .slidedown-toggle' );

  slidedownToggle.click( function() {
    var slidedown = $(this).parent( '.slidedown' );
    var navOpen = $( '#global-nav li.open' );
    var subnav = $(this).siblings( '.nav-sub' );
    var subnavHeight = subnav.height();

    slidedown.toggleClass( 'open' );

    if (navOpen){
      subnav.height( subnavHeight );
    }else{
      subnav.height( 0 );
    }

  });

});

Answer 1

$( '#global-nav li.open' ) 将返回一个 jQuery 对象，该对象将始终为真，您需要检查当前切换元素所属的 li 是否打开了该类。

您可以使用 .closest() 查找 li 元素，然后使用 .hasClass() 检查该类是否存在

$(function navCollapse() {

    var slidedownToggle = $('#global-nav .slidedown-toggle');

    slidedownToggle.click(function () {
        var slidedown = $(this).parent('.slidedown');
        var $li = $(this).closest('li');
        var subnav = $(this).siblings('.nav-sub');
        var subnavHeight = subnav.height();

        slidedown.toggleClass('open');

        if ($li.hasClass('open')) {
            subnav.height(0);
        } else {
            subnav.height(subnavHeight);
        }

    });

});

Answer 2

LIVE DEMO

  var $gNav = ('#global-nav');

  $('.slidedown-toggle', $gNav).click( function( e ) { 

    var myLI = $(this).closest('.slidedown');
    var isON = myLI.hasClass('open');

    // ALL
    $('li.open', $gNav).removeClass('open').find('.nav-sub').slideUp();

    // THIS
    myLI.toggleClass('open', !isON).find('.nav-sub').stop().slideToggle();  

  });