时间戳

首页 > 解决方案 > 更改下拉图标和 javascript 转换

javascript - 更改下拉图标和 javascript 转换

问题描述

此下拉图标不会平稳转动，转换不起作用，当下拉菜单突然打开时，与关闭时相同，当您单击屏幕上的其他位置并保持打开状态时，它不会关闭。希望有人可以提供帮助，如果有答案，它可以帮助其他希望做类似的人。

这是我的代码：
JsFiddle 如果您觉得它更容易：https ://jsfiddle.net/Vorex/tr3196L7/1/

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.cssText === "display: block;") {
  dropdownContent.style.cssText = "display: none;";
  } else {
  dropdownContent.style.cssText = "display: block;";
  }
  });
}


$(".btn_body").click(function () {
      $(this).find('i').toggleClass('fa-caret-down fa-caret-right');
      if ($(".btn_body").not(this).find("i").hasClass("fa-caret-down")) {
          $(".btn_body").not(this).find("i").toggleClass('fa-caret-down fa-caret-right');
      }
  });
/*===================
    CHAT SIDEBAR
====================*/

.chatbar  {
    scrollbar-width: none;
    font-family: 'Tomorrow', sans-serif;
    height: 100%;
    color: white;
    background-color: #363b42;
    list-style-type: none;
    text-align: center;
    margin: 0px;
    width: 25%;
    padding: 0px;
    overflow-y: scroll;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

.chatbar h1 {
    font-size: 25px;
}

.chatbar a, .dropdown-btn {
    font-size: 20px;
    text-align: center;
    display: block;
    position: sticky;
    text-decoration: none;
    padding: 10px;
    padding-bottom:15px;
    color: white;
    transition: 1s ease;
}
.chatbar a:hover, .dropdown-btn:hover {
    background-color: #5a626d;
    border-radius: 10px;
    transition: background-color .5s ease;
}

.chatbar img {
    height: 32px;
    width: 32px;
    border-radius: 16px;
    float: left;
}

.chatbar::-webkit-scrollbar {
    display: none;
}

.dropdown-btn {
  padding: 10px;
  text-decoration: none;
  font-size: 20px;
  color: #fff;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: center;
  cursor: pointer;
  outline: none;
  font-family: 'Tomorrow', sans-serif;
}

.dropdown-container {
  display: none;
  background-color: #363b42;
  padding-left: 8px;
}

.btn_body {
	color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="chatbar">
    <h1> Chatbar </h1><br>
  <a href="chat.php" style="color: lightgreen;"> Global Chat </a>
  <a href="#" style="color: orange;"> Messages </a>
  <button class="dropdown-btn btn_body">Dropdown <i class="fa fa-caret-right"></i></button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>


</body>
</html>

标签： javascriptjqueryhtmlcss

解决方案

正如我在评论中告诉你的那样，你需要通过应用 JS 动画或（可能对你更容易）切换一个旋转你的对象的类来旋转你的对象。

这是一个示例，您显然可以将其调整为使用 jQuery ......我不使用它，因为我不喜欢它：

const ddButton = document.querySelector('.dropdown-btn');

ddButton.addEventListener('click', event => {
  document.querySelector(".fa.fa-caret-up").classList.toggle("rotate-icon");
});
.fa-caret-up {
    transform: rotate(0deg);
    transition: all 0.5s ease;
}

.fa-caret-up.rotate-icon {
    transform: rotate(180deg);
}
<button class="dropdown-btn btn_body">Dropdown <i class="fa fa-caret-up"></i></button>

推荐阅读