时间戳

首页 > 解决方案 > toggleClass 在每个函数中没有按预期工作

javascript - toggleClass 在每个函数中没有按预期工作

问题描述

我创建了一个带有下拉菜单的简单导航。我遇到的唯一问题是，当单击具有向下箭头图标的链接（如链接 1 链接 2 链接 3）时，单击具有向下箭头图标的另一个链接时它不会旋转。我不确定为什么会这样。请帮我。先感谢您！

$(document).ready(function() {


  $('.dropdown').each(function() {

    var $dropdown = $(this);

    $("a.dropdown-toggle", $dropdown).click(function(e) {
      e.preventDefault();

      $(".dropdown-toggle i", $dropdown).toggleClass('rotate-arrow');

      $dropdownMenu = $(".dropdown-menu", $dropdown);

      $dropdownMenu.toggle();

      $(".dropdown-menu").not($dropdownMenu).hide();
    });

  });


});
.rotate-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  display: none;
}

.show-dropdown-menu {
  display: block;
}

.dropdown {
  margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <nav>
    <ul class="menu nav">
      <li class="expanded dropdown">
        <a href="" class="dropdown-toggle">Link 1 <i class="fas fa-chevron-down"></i></a>
        <ul class="menu dropdown-menu">
          <li>
            <a href="#">link 1 inner 1</a>
          </li>
          <li>
            <a href="#">link 1 inner 2</a>
          </li>
        </ul>
      </li>
      <li class="expanded dropdown">
        <a href="" class="dropdown-toggle">Link 2 <i class="fas fa-chevron-down"></i></a>
        <ul class="menu dropdown-menu">
          <li>
            <a href="#">link 2 inner 1</a>
          </li>
          <li>
            <a href="#">link 2 inner 2</a>
          </li>
        </ul>
      </li>
      <li class="expanded dropdown">
        <a href="" class="dropdown-toggle">Link 3 <i class="fas fa-chevron-down"></i></a>
        <ul class="menu dropdown-menu">
          <li>
            <a href="#">link 3 inner 1</a>
          </li>
          <li>
            <a href="#">link 3 inner 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

</html>

标签： javascriptjquery

解决方案

坏方法！
CSS 表示层叠样式表

$('.dropdown a').click(function( event ) {
  event.preventDefault();
  
  let $_LI = $(this).closest('li');

  if (!$_LI.hasClass('selected')) {
    $('.selected').removeClass('selected');
  }
  $_LI.toggleClass('selected');
});
nav ul { list-style: none;}

li > ul { display: none; }
li.selected > a > i { transform: rotate(180deg); }
li.selected > ul { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<nav>
  <ul class="menu nav">
    <li class="expanded dropdown">
      <a href="" class="dropdown-toggle">Link 1 <i class="fas fa-chevron-down"></i></a>
      <ul class="menu dropdown-menu">
        <li>
          <a href="#">link 1 inner 1</a>
        </li>
        <li>
          <a href="#">link 1 inner 2</a>
        </li>
      </ul>
    </li>
    <li class="expanded dropdown">
      <a href="" class="dropdown-toggle">Link 2 <i class="fas fa-chevron-down"></i></a>
      <ul class="menu dropdown-menu">
        <li>
          <a href="#">link 2 inner 1</a>
        </li>
        <li>
          <a href="#">link 2 inner 2</a>
        </li>
      </ul>
    </li>
    <li class="expanded dropdown">
      <a href="" class="dropdown-toggle">Link 3 <i class="fas fa-chevron-down"></i></a>
      <ul class="menu dropdown-menu">
        <li>
          <a href="#">link 3 inner 1</a>
        </li>
        <li>
          <a href="#">link 3 inner 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

推荐阅读