如何在jQuery中使用toggleClass时停止所有类的切换

Question

在jQuery中使用toggleClass时，我想停止所有类的切换。

我已经使用以下代码实现了jQuery函数来将图标切换180度。

HTML:

{{#each menu}}
<ul id="myUL">
<div class="menu-text">
<li><span class="caret treeparent">&nbsp;{{@key}}<i class="fas fa-chevron-down arrow"></i></span>
<ul class="tog">
{{#each this}}
<li class="nav-item">
<a>{{{this.label}}}</a>
</li>
{{/each}}
</ul>
</li>
</div>
</ul>
{{/each}}

jQuery:

$(".treeparent").click(function () {
$(".arrow").toggleClass('flip');
});

CSS

.arrow {
-moz-transition: transform 0.6s;
-webkit-transition: transform 0.6s;
transition: transform 0.6s;
}
.flip {
transform: rotate(-180deg);
}

然后所有图标都旋转180度。我想做的是只旋转单击的div图标。为了解决这个问题，我使用了以下代码。

$(".treeparent").click(function () {
$(this).next('.arrow').toggleClass('flip');
});

但随后轮换也不起作用。我该如何解决？

Answer 1

在这种情况下，由于.arrow包含在.treeparent中，您应该能够修改这一的点击功能

$(".treeparent").click(function () {
$(".arrow", this).toggleClass('flip');
});

$(selector, element)将查找包含在给定element中的selector，在这种情况下，这是.treeparent单击的

PS。如果您计划使用neested元素，我建议将选择器更改为>.arrow，以便只指向第一个子元素。

HTH-

感谢@Swati提供代码片段

$(".treeparent").click(function () {
$(".arrow", this).toggleClass('flip');
});

.arrow {
-moz-transition: transform 0.6s;
-webkit-transition: transform 0.6s;
transition: transform 0.6s;
}
.flip {
transform: rotate(-180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul id="myUL">
<div class="menu-text">
<li><span class="caret treeparent">&nbsp;{{@key}}<i class="fa fa-chevron-down arrow"></i></span>
<ul class="tog">

<li class="nav-item">
<a>{{{this.label}}}</a>
</li>

</ul>
</li>
</div>
</ul>
<ul id="myUL">
<div class="menu-text">
<li><span class="caret treeparent">&nbsp;{{@key}}<i class="fa fa-chevron-down arrow"></i></span>
<ul class="tog">

<li class="nav-item">
<a>{{{this.label}}}</a>
</li>
<li class="nav-item">
<a>{{{this.label}}}</a>
</li>
<li class="nav-item">
<a>{{{this.label}}}</a>
</li>

</ul>
</li>
</div>
</ul>

Answer 2

您可以获得最接近的div，即：menu-text，然后使用.find()获得需要切换类的<i>。

演示代码 :

$(".treeparent").click(function () {
//get this closest ->find arrow class toggle class or use .closest("li")
$(this).closest(".menu-text").find(".arrow").toggleClass('flip');
});

.arrow {
-moz-transition: transform 0.6s;
-webkit-transition: transform 0.6s;
transition: transform 0.6s;
}
.flip {
transform: rotate(-180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul id="myUL">
<div class="menu-text">
<li><span class="caret treeparent">&nbsp;{{@key}}<i class="fa fa-chevron-down arrow"></i></span>
<ul class="tog">

<li class="nav-item">
<a>{{{this.label}}}</a>
</li>

</ul>
</li>
</div>
</ul>
<ul id="myUL">
<div class="menu-text">
<li><span class="caret treeparent">&nbsp;{{@key}}<i class="fa fa-chevron-down arrow"></i></span>
<ul class="tog">

<li class="nav-item">
<a>{{{this.label}}}</a>
</li>
<li class="nav-item">
<a>{{{this.label}}}</a>
</li>
<li class="nav-item">
<a>{{{this.label}}}</a>
</li>

</ul>
</li>
</div>
</ul>