如何创建一个只在点击时向下旋转的图标

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

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

Answer 2

$('.dropmenu')函数中的选择器.on('click'正在选择页面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 3

只需更改点击处理程序，使用“this”引用点击的元素。

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