toggleclass不工作？

Question

我想点击父母一个孩子div类将切换。

in html

<div class="A">
    <div class="B C">
        <p>check your card</p>
    </div>
</div>

在css中

.A{display:block;}

在js

$(".A").click(function() {
    $(".B").toggleClass("C");
});

Answer 1

在您css中，您无需添加C课程。

＆＃13;

＆＃13;

$(".A").click(function () {
    $(".B").toggleClass("C");
});

＆＃13;

.A {
    display:block;
}
.C {
    font-size: 120%;
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
    <div class="B C">
        <p>check your card</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我把它放在fiddle中。似乎代码正常工作（检查元素）。

您可能需要将其包装在

之间

$(document).ready(function() {

    // Your code here

});

或者在您的css中添加.C课程

Answer 3

在你的问题中没有为B类和C类定义规则。所以你没有感觉到。但是你的代码运行正常。

＆＃13;

＆＃13;

$(".A").click(function() {
    $(".B").toggleClass("C");
});

＆＃13;

.A{display:block; border:1px solid;}

.B{
    background-color: red;
  color: white;
  }

.C{
    background-color: black;
  color: white;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
    <div class="B C">
        <p>check your card</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您的代码运行正常。只需为类“.C”添加css就可以在浏览器中反映出来。只需将其添加到您的CSS：

.B {color:000;font-size:12px;}
.C {color:red; font-size:20px;}

以下是工作示例......

http://jsfiddle.net/opdzvo3f/2/