切换类在单击子元素时不起作用

toggleClass not working when clicking on child element

本文关键字：元素 不起作用 单击      更新时间：2023-09-26

我正在使用.toggleClass在我的网站上隐藏/显示div，它可以按照我想要的方式工作，但只有当我单击div本身而不是其子元素（三个跨度）时，所以我必须只单击div本身，但我不明白的是为什么它检测到单击但在单击这些跨度时不执行toggleClass？

目录 ：

<div class="ClicLog Login" id="BoutonLogin">
    <span class="ico-Login"></span>
    <span class="noMobile" id="boutonConnectText">MON COMPTE</span>
    <span class="ico-Menu"></span>
</div>

Javascript ：

$('.ClicLog').click(function () {
    console.log("clic !");
    $('.nocollapse').toggleClass('LoginTest');
});

谢谢！

您仅将事件处理程序附加到div，而不是其子级。

试试这个：

$('.ClicLog > span').click(function () {
    console.log("clic !");
    $('.nocollapse').toggleClass('LoginTest');
});

试试这个 

$('.ClicLog').on('click','*',function () {
    console.log("clic !");
    $('.nocollapse').toggleClass('LoginTest');
});

也添加跨度

$('.ClicLog').children('span').click(function () {
    console.log("clic !");
    $('.nocollapse').toggleClass('LoginTest');
});

使用 .on（）您可以使用任何您喜欢的选择器及其第二个参数。

$('.ClicLog').on('click', '*', function() {
  console.log("clic !");
  $('.nocollapse').toggleClass('LoginTest');
});

或

$('.ClicLog').on('click', '> *', function() {
  console.log("clic !");
  $('.nocollapse').toggleClass('LoginTest');
});

对于直系后代。

https://jsfiddle.net/x9tsv7bo/

好的，我发现了问题：有一个 javascript 在单击除div 以外的其他地方时关闭了我想打开的div，所以单击跨度会立即打开和关闭div...我以为我以前检查过它，但显然没有。谢谢大家的帮助！

相关文章：