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

【问题标题】：How to stop all classes toggle when use toggleClass in jQuery在jQuery中使用toggleClass时如何停止所有类切换
【发布时间】：2020-08-29 12:51:42
【问题描述】：

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

然后旋转也不起作用。我该如何解决这个问题？

【问题讨论】：

您需要包含 HTML 以查看 .treeparent 和 .arrow 的相关性
@freedomn-m 编辑了添加 HTML 部分的问题
我认为最简单的解决方案是为您希望切换的标签添加一个 id，然后通过它的 id 进行查询

标签： javascript jquery

【解决方案1】：

在这种情况下，.arrow 包含在 .treeparent 中，您应该能够为此修改点击功能

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

$(selector, element) 将查找包含在给定element 中的selector，在本例中，这就是点击的.treeparent

附言。如果您打算拥有嵌套元素，我建议将选择器更改为 >.arrow，因此只指向第一个子元素。

HTH

感谢@Swati 提供代码 sn-p

$(".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>

【讨论】：

【解决方案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>

【讨论】：