Question

我有一个图标，单击该图标可将一个类添加到 nav-btn 类中，并且该菜单将设置为动画，显示整个屏幕的高度。

$('.nav-btn').click(function(){
        $(this).toggleClass('open');
        $('nav').animate({height: '100vh'});    
    });

当我尝试通过同时调用原始类和添加的类来关闭菜单时，它没有响应。

$('.nav-btn.open').click(function(){
        console.log('test');
        $('nav').animate({height: '60px'});
    });

我什至在控制台中都看不到console.log，所以我想我没有正确地调用该类，但是我尝试了几种组合但没有任何效果，并且通过阅读我正在呼叫的其他人的问题正确通话。请帮忙！

Answer 1

那是因为您将click事件绑定到.nav-btn.open 在运行时，该事件尚不存在（仅在用户单击按钮时添加该类）。无需绑定两个单独的事件，您可以将逻辑合并到您的单击处理程序中，并且只需添加条件检查按钮是否存在类open：

$('.nav-btn').click(function(){
  var $t = $(this);
  var $n = $('nav');

  if (!$t.hasClass('open'))
    $n.animate({height: '100vh'});
  else
    $n.animate({height: '60px'});    

  $t.toggleClass('open');
});

nav {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="nav-btn">Nav Button</button>
<nav>Navigation</nav>

甚至更好：您可以将目标height值存储在变量中，并使用三元运算符分配所需的值：

$('.nav-btn').click(function() {
  var $t = $(this);
  var targetHeight = $t.hasClass('open') ? '60px' : '100vh';

  $('nav').animate({ height: targetHeight });
  $t.toggleClass('open');
});

nav {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="nav-btn">Nav Button</button>
<nav>Navigation</nav>

Answer 2

@ Terry的响应也很好，但是您需要牢记的还有一个名为event delegation的概念。正如Terry所解释的那样，由于将事件处理程序附加到尚不存在的元素而导致了您遇到的问题。

但是，使用事件委托，您可以将事件附加到您将永远存在的父元素（文档或只是某些容器元素）。使用$.on(...)，将处理程序附加到父元素，事件冒泡到指定元素，无论它是否在DOM中都存在。

下面，我修改了示例以显示事件委托的工作方式。（我认为Terry的回答比较干净，但是委派是一个很有帮助的主题）。

$("#btn-parent")
  .on("click", ".nav-btn.close", function() {
    $(this).toggleClass('open').toggleClass("close");
    $('nav').animate({height: '100vh'});
  })
  .on("click", ".nav-btn.open", function() {
    $(this).toggleClass('open').toggleClass("close");
    $('nav').animate({height: '20px'});
  });

nav {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="btn-parent">
  <button class="nav-btn close">Nav Button</button>
</div>

<nav>Navigation</nav>

Answer 3

作为替代解决方案-如果目标只是打开/关闭动画，则可以通过CSS过渡获得相同的结果。这样，您只需要担心打开和关闭.open类即可。

$('.nav-btn').on('click', function(){
   $('nav').toggleClass('open');   
});

nav {
  border:.1em solid blue;
  height:1em;
  transition:height 300ms;
}

nav.open {
  height:80vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-btn" href="#">Navigation</a>
<nav></nav>

在addClass

3 个答案: