Jquery 无法在addClass之后设置目标类

我有一个图标，当点击该图标时，会将一个类添加到导航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，因此我认为我没有正确调用该类，但我尝试了一些组合，但没有任何效果，从阅读其他人的问题来看，我正确调用了该类。请帮忙

这是因为您正在将click事件绑定到运行时打开的

.nav btn.open

，该类尚不存在（该类仅在用户单击按钮时添加）。不必绑定两个单独的事件，您可以将逻辑组合到第一次单击处理程序中，只需添加一个条件检查按钮上是否存在类

open

：

$（'.nav btn'）。单击（函数（）{
var$t=$（本）；
var$n=$（'nav'）；
如果（！$t.hasClass（'open'））
$n.animate（{height:'100vh'}）；
其他的
$n.animate（{height:'60px'}）；
$t.toggleClass（“开放”）；
});
nav{
背景颜色：黄色；
}

导航按钮
导航
，这是因为您正在将单击事件绑定到运行时打开的
.nav btn.open
，但该类尚不存在（仅当用户单击按钮时才添加该类）。不必绑定两个单独的事件，您可以将逻辑组合到第一次单击处理程序中，只需添加一个条件检查按钮上是否存在类
open
：


$（'.nav btn'）。单击（函数（）{
var$t=$（本）；
var$n=$（'nav'）；
如果（！$t.hasClass（'open'））
$n.animate（{height:'100vh'}）；
其他的
$n.animate（{height:'60px'}）；
$t.toggleClass（“开放”）；
});
nav{
背景颜色：黄色；
}

导航按钮
导航
@的响应也很好，但您可以记住的另一个概念是一个名为。正如Terry所解释的，您遇到的问题是由于您将事件处理程序附加到一个尚不存在的元素而引起的

但是，通过事件委派，您可以将事件附加到您知道将始终存在的父元素（文档或某个容器元素）。使用（…）
上的
$，可以将处理程序附加到父元素，而事件会向下冒泡到指定的元素，无论它是否存在于DOM中

下面，我修改了您的示例以显示事件委派的工作方式。（我认为特里的回答更清晰，但代表团是一个有助于理解的主题）


$（“btn父项”）
.on（“单击“，”.nav btn.close“，函数（）{
$（this）.toggleClass（'open'）.toggleClass（“close”）；
$（'nav'）.animate（{height:'100vh'}）；
})
.on（“单击“，”.nav btn.open“，函数（）{
$（this）.toggleClass（'open'）.toggleClass（“close”）；
$（'nav'）.animate（{height:'20px'}）；
});
nav{
背景颜色：黄色；
}

导航按钮
导航
@的响应也很好，但您可以记住的另一个概念是一个名为。正如Terry所解释的，您遇到的问题是由于您将事件处理程序附加到一个尚不存在的元素而引起的

但是，通过事件委派，您可以将事件附加到您知道将始终存在的父元素（文档或某个容器元素）。使用（…）
上的
$，可以将处理程序附加到父元素，而事件会向下冒泡到指定的元素，无论它是否存在于DOM中

下面，我修改了您的示例以显示事件委派的工作方式。（我认为特里的回答更清晰，但代表团是一个有助于理解的主题）


$（“btn父项”）
.on（“单击“，”.nav btn.close“，函数（）{
$（this）.toggleClass（'open'）.toggleClass（“close”）；
$（'nav'）.animate（{height:'100vh'}）；
})
.on（“单击“，”.nav btn.open“，函数（）{
$（this）.toggleClass（'open'）.toggleClass（“close”）；
$（'nav'）.animate（{height:'20px'}）；
});
nav{
背景颜色：黄色；
}

导航按钮
导航
作为替代解决方案-如果目标只是打开/关闭动画，那么CSS转换也可以实现相同的结果。这样，您只需担心打开和关闭
.open
类


$（'.nav btn'）。在（'click'，function（）上{
$（'nav'）。toggleClass（'open'）；
});
nav{
边框：.1米纯蓝色；
高度：1米；
过渡段：高度300ms；
}
导航开放{
高度：80vh；
}
作为替代解决方案-如果目标只是打开/关闭动画，那么CSS转换也可以达到同样的效果。这样，您只需担心打开和关闭
.open
类


$（'.nav btn'）。在（'click'，function（）上{
$（'nav'）。toggleClass（'open'）；
});
nav{
边框：.1米纯蓝色；
高度：1米；
过渡段：高度300ms；
}
导航开放{
高度：80vh；
}

可能重复的感谢Terry的可能重复，这几乎可以完美地工作，但第一次单击时什么也没有发生。它在第一次单击后工作正常，但不是第一次单击时。有什么想法吗？等等，现在可以了。我只是改变了动画的顺序。再次感谢你，你帮了我大忙。@paulblackmore我的错，我不小心交换了周围的值。检查更新的演示，它现在应该可以工作了：）谢谢Terry，这几乎可以完美地工作，但第一次点击什么都没有发生。它在第一次单击后工作正常，但不是第一次单击时。有什么想法吗？等等，现在可以了。我只是改变了动画的顺序。再次感谢，你有蜜蜂