单击子元素时 toggleClass 不起作用

Question

我在我的网站上使用 .toggleClass 到 hide/show div，它按我想要的方式工作，但只有当我点击 div 本身而不是它的子元素（三个 span）时，我才必须点击 div 本身，但我不明白为什么它检测到点击但在点击这些跨度时不执行 toggleClass ?

Html :

<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');
});

谢谢！

Answer 1

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

试试这个：

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

Answer 2

将跨度添加到

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

Answer 3

试试这个

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

Answer 4

使用.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/

Answer 5

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

单击子元素时 toggleClass 不起作用

toggleClass not working when clicking on child element

html

javascript

css

jquery

toggleclass