Question

我有一个主元素和2个辅助元素。单击主要元素时，它会切换两个辅助元素。

$(".main").click(function() {
    $(this).toggleClass("classA").toggleClass("classB");
    $(".secondary").toggleClass("classC").toggleClass("classD");
));

但是，可以单独单击每个辅助节点，类切换只会影响该元素。

$(".secondary").click(function() {
   $(".secondary").toggleClass("classC").toggleClass("classD");
));

我需要添加一个检查/功能，以确保如果切换所有辅助元素，那么主要也会切换。

Answer 1

试试这个：

$(".secondary").click(function() {
   $(".secondary").toggleClass("classC").toggleClass("classD");
   $('.main').click();
));

在这里查看小提琴： http://jsfiddle.net/maniator/bx9QQ/

代码：

$("#main").click(function() {
    $(this).toggleClass("classA").toggleClass("classB");
    $(".secondary").toggleClass("classC").toggleClass("classD");
});

$(".secondary").click(function() {
   $(this).toggleClass("classC").toggleClass("classD");
   $("#main").click;
});

HTML：

<div id='main'>
    <div class='secondary'></div>
    <div class='secondary'></div>
</div>

的CSS：

#main {
    background: grey;
    height: 100px;
    width: 150px;
}

.secondary {
    background: blue;
    height: 50px;
    width: 90px;
    margin: 0 auto;
}

.classA {background: green !important;}
.classB {background: orange !important;}
.classC {background: yellow;}
.classD {background: purple;}

用jQuery检查切换

1 个答案: