Question

我有以下HTML和JS。当您点击.slidedown-toggle时，它会切换课程＆＃39;打开＆＃39;在它的父母（.slidedown）上并将高度应用于它的兄弟（.nav-sub）。这是有效的，但是当打开＆＃39;打开时，什么不能将高度设置回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(); });

切换类后将高度设置回0

2 个答案: