时间戳

首页 > 解决方案 > 如何旋转仅单击的 SVG 图像

javascript - 如何旋转仅单击的 SVG 图像

问题描述

我尝试在单击时旋转用于导航栏的 SVG 图像。我设法做到了，但问题是当我单击其中一个按钮时，所有图像都会立即旋转，而当我单击其他位置时，图像不会重置为原始位置。

这是我的 HTML

<!-- === Dropdown Menu === -->
<div class="collapse navbar-collapse" id="navToggler">
  <div class="dropdown">
    <button class="btn" type="button" id="navButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Product <img class="arrow reset" src="/blogr/images/icon-arrow-light.svg">
    </button>
    <ul class="dropdown-menu" aria-labelledby="navButton1">
      <li><a class="dropdown-item" href="#">Overview</a></li>
      <li><a class="dropdown-item" href="#">Pricing</a></li>
      <li><a class="dropdown-item" href="#">Marketplace</a></li>
      <li><a class="dropdown-item" href="#">Features</a></li>
      <li><a class="dropdown-item" href="#">Integrations</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn" type="button" id="navButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Company <img class="arrow reset" src="/blogr/images/icon-arrow-light.svg">
    </button>
    <ul class="dropdown-menu" aria-labelledby="navButton1">
      <li><a class="dropdown-item" href="#">About</a></li>
      <li><a class="dropdown-item" href="#">Team</a></li>
      <li><a class="dropdown-item" href="#">Blog</a></li>
      <li><a class="dropdown-item" href="#">Career</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn" type="button" id="navButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Connect <img class="arrow reset" src="/blogr/images/icon-arrow-light.svg">
    </button>
    <ul class="dropdown-menu" aria-labelledby="navButton1">
      <li><a class="dropdown-item" href="#">Contact</a></li>
      <li><a class="dropdown-item" href="#">Newsletter</a></li>
      <li><a class="dropdown-item" href="#">LinkedIn</a></li>
    </ul>
  </div>
</div>
<!-- END -->

CSS

.rotate {
   transform: rotate(180deg);
   transition: .3s;
}
.arrow.reset{
   transform: rotate(0deg);
   transition: .3s;
}

Javascript

$("button#navButton1.btn").on("click", function () {

      $(".arrow").toggleClass("rotate");
      $(".arrow").toggleClass("reset");

});

我想要发生的事情：

图片

点击发生了什么：

点击时

当我点击另一个地方时发生了什么：

点击其他地方

标签： javascripthtmljquerycss

解决方案

在 onclick 功能中，您将选择.arrow文档中的所有内容。我想您想要的是针对 clicked 内的箭头.btn。

您必须将第二个参数传递给 jQuery 以告诉它仅在该节点内搜索。这样的事情应该这样做：

$('button#navButton1.btn').on('click', function (event) {
    $('.arrow', event.target)
        .toggleClass('rotate')
        .toggleClass('reset');
});

推荐阅读