如何创建一个单击时向下旋转的图标

Question

我制作了一个带有图标的 slideToggle 菜单，当用户单击该图标时，它会向下旋转，但是，当我单击其中一个图标时，所有图标都会旋转。如何只旋转点击的图标，而不是全部？

$(document).ready(function() {
  // toggle slide down nav
  $('.nav-sidebar ul:has(li)').addClass('sub-menu');

  $('.dropmenu').on('click', function() {
    $(this).next('.sub-menu').slideToggle(200);
    $(this).parent().siblings().children().next().slideUp();
    return false;
  });
  // arrow rotate
  $('.dropmenu').on('click', function() {
    // $('.dropmenu').removeClass('openmenu');
    // $(this).addClass('openmenu');
    if ($('.dropmenu').hasClass('openmenu')) {
      $('.dropmenu').removeClass('openmenu');
    } else {
      $('.dropmenu').addClass('openmenu');
    }
  });
});

.nav-sidebar {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-sidebar>li>a,
.sub-menu>li>a {
  display: block;
  color: #838F9A;
  text-transform: capitalize;
  padding: 0 30px;
  line-height: 3.5em;
}
.sub-menu>li>a {
  line-height: 2.5em;
}
.nav-sidebar>li>a:hover,
.nav-sidebar>li>a:focus,
.sub-menu>li>a:hover,
.sub-menu>li>a:focus {
  color: #4FC1E9;
}
.dropmenu:after {
  font-family: 'FontAwesome';
  font-size: 16px;
  content: "\f105";
  vertical-align: middle;
  float: right;
  margin-right: -10px;
  transition: all .3s ease;
}
.openmenu:after {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sub-menu {
  display: none;
  list-style: none;
  padding: 10px 30px;
  margin: 0;
  background-color: #1D232B;
  position: relative;
}
.open-menu>.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="nav-sidebar">
  <li>
    <a href="javascript:void(0);" class="dropmenu">Place</a>
    <ul>
      <li><a href="place.php">Published</a>
      </li>
      <li><a href="schedule.php">Schedule</a>
      </li>
      <li><a href="my-place.php">My Place</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="javascript:void(0);" class="dropmenu">Place</a>
    <ul>
      <li><a href="place.php">Published</a>
      </li>
      <li><a href="schedule.php">Schedule</a>
      </li>
      <li><a href="my-place.php">My Place</a>
      </li>
    </ul>
  </li>
</ul>

我做的外部例子：https://jsfiddle.net/y6adghh3/

Answer 1

.on('click' 函数中的选择器 $('.dropmenu') 正在选择带有 class dropmenu 的页面上的任何元素。您需要确保它只选择被点击的元素。幸运的是，您可以通过 this.

引用被点击的元素

以下代码应该有效：

$(document).ready(function() {
  // toggle slide down nav
  $('.nav-sidebar ul:has(li)').addClass('sub-menu');

  $('.dropmenu').on('click', function() {
    $(this).next('.sub-menu').slideToggle(200);
    $(this).parent().siblings().children().next().slideUp();
    return false;
  });
  // arrow rotate
  $('.dropmenu').on('click', function() {
    if ($(this).hasClass('openmenu')) {
      $(this).removeClass('openmenu');
    } else {
      $(this).addClass('openmenu');
    }
  });
});

Answer 2

只需更改点击处理程序以使用 'this' 引用被点击的元素。

 $('.dropmenu').on('click', function() {
    if ($(this).hasClass('openmenu')) {
      $(this).removeClass('openmenu');
    } else {
      $(this).addClass('openmenu');
    }
  });
});

Answer 3

$(document).ready(function() {
  // toggle slide down nav
  $('.nav-sidebar ul:has(li)').addClass('sub-menu');

  $('.dropmenu').on('click', function() {
    $(this).toggleClass('openmenu');// arrow rotate
    $(this).next('.sub-menu').slideToggle(200);
    $(this).parent().siblings().children().removeClass('openmenu').next().slideUp();
    return false;
  });
  
});

.nav-sidebar {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-sidebar>li>a,
.sub-menu>li>a {
  display: block;
  color: #838F9A;
  text-transform: capitalize;
  padding: 0 30px;
  line-height: 3.5em;
}
.sub-menu>li>a {
  line-height: 2.5em;
}
.nav-sidebar>li>a:hover,
.nav-sidebar>li>a:focus,
.sub-menu>li>a:hover,
.sub-menu>li>a:focus {
  color: #4FC1E9;
}
.dropmenu:after {
  font-family: 'FontAwesome';
  font-size: 16px;
  content: "\f105";
  vertical-align: middle;
  float: right;
  margin-right: -10px;
  transition: all .3s ease;
}
.openmenu:after {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sub-menu {
  display: none;
  list-style: none;
  padding: 10px 30px;
  margin: 0;
  background-color: #1D232B;
  position: relative;
}
.open-menu>.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="nav-sidebar">
  <li>
    <a href="javascript:void(0);" class="dropmenu">Place</a>
    <ul>
      <li><a href="place.php">Published</a>
      </li>
      <li><a href="schedule.php">Schedule</a>
      </li>
      <li><a href="my-place.php">My Place</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="javascript:void(0);" class="dropmenu">Place</a>
    <ul>
      <li><a href="place.php">Published</a>
      </li>
      <li><a href="schedule.php">Schedule</a>
      </li>
      <li><a href="my-place.php">My Place</a>
      </li>
    </ul>
  </li>
</ul>

如何创建一个单击时向下旋转的图标

how to create an icon that rotate downward when just at the click

javascript

addclass

slidetoggle

removeclass