时间戳

首页 > 解决方案 > 使用 transform: rotateZ(180deg) translateY(2px) css 属性如何旋转下拉箭头？

html - 使用 transform: rotateZ(180deg) translateY(2px) css 属性如何旋转下拉箭头？

问题描述

gradeexpanded:false,

gradeOnClick: function (event) {
      this.gradeexpanded = !this.gradeexpanded;
    },

.dropdown-check-list {
  margin-left: 35px;
  display: inline-block;
}
.dropdown-check-list .anchor {
  width: 300px;
  color: #262626;
  font-size: 16px;
  font-weight: 600;
  margin-top: 30px;
  background-color: #ffff;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 40px 10px 10px;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  background-color: #ffff;
  padding: 2px;
  display: none;
  margin: 0;
  border-top: none;
}
.dropdown-check-list ul.items li {
  background-color: #ffff;
  list-style: none;
}
.dropdown-check-list.visible .anchor {
  padding-top: 8px;
  border-bottom: 2px solid #F0F0F0;
  background-color: #ffff;
}
.dropdown-check-list.visible .items {
  font-size: 14px;
  height: 325px;
  width: 300px;
  background-color: #ffff;
  display: block;
}

.gradeexpanded{
  transform: rotateZ(180deg) translateY(2px);
}
 <div
            class="dropdown-check-list"
            :class="{ visible: gradeexpanded }"
            tabindex="100"
          >
            <span class="anchor" @click="gradeOnClick"
              >Gtest</span
            >
            <ul class="items">
              <div class="checkbox-alignment-form-filter">
                <input
                  type="checkbox"
                  id="HR 2062 : 2011"
                  class="vh-product" value="H2011"
                  v-model="checkedNames"
                />
                <label class="productlist-specific" for="HR 2062 : 2011"
                  >H2011</label
                >
              </div>
              <div class="checkbox-alignment-form-filter2">
                <input
                  type="checkbox"
                  id="E250A"
                  class="vh-product"
                  v-model="checkedNames" value="E250A"
                />
                <label class="productlist-specific" for="E250A">E250A</label>
              </div>
           </ul>
           </div>

在此处输入图像描述

使用变换：rotateZ(180deg) translateY(2px); css 属性如何旋转下拉箭头。

我已经为 html 和 css 中的下拉代码编写了下面的代码，如下图所示，我无法相应地旋转箭头图标。

问题是目前，无论下拉菜单是否打开，它都保持在相同的状态。

标签： htmlcssvue.js

解决方案

尝试添加以下CSS：

.dropdown-check-list.visible > span.anchor:after {
  transform: rotate(45deg);
}


const dropdown = document.querySelector(".dropdown-check-list");

dropdown.addEventListener("click", function () {
  this.classList.toggle("visible");
});
.dropdown-check-list {
  margin-left: 35px;
  display: inline-block;
}
.dropdown-check-list .anchor {
  width: 300px;
  color: #262626;
  font-size: 16px;
  font-weight: 600;
  margin-top: 30px;
  background-color: #ffff;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 40px 10px 10px;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  background-color: #ffff;
  padding: 2px;
  display: none;
  margin: 0;
  border-top: none;
}
.dropdown-check-list ul.items li {
  background-color: #ffff;
  list-style: none;
}
.dropdown-check-list.visible .anchor {
  padding-top: 8px;
  border-bottom: 2px solid #f0f0f0;
  background-color: #ffff;
}
.dropdown-check-list.visible .items {
  font-size: 14px;
  height: 325px;
  width: 300px;
  background-color: #ffff;
  display: block;
}

.dropdown-check-list.visible > span.anchor:after {
  transform: rotate(45deg);
}
<div class="dropdown-check-list" tabindex="100">
  <span class="anchor">Gtest</span>
  <ul class="items">
    <div class="checkbox-alignment-form-filter">
      <input type="checkbox" id="HR 2062 : 2011" class="vh-product" value="H2011" />
      <label class="productlist-specific" for="HR 2062 : 2011">H2011</label>
    </div>
    <div class="checkbox-alignment-form-filter2">
      <input type="checkbox" id="E250A" class="vh-product" value="E250A" />
      <label class="productlist-specific" for="E250A">E250A</label>
    </div>
  </ul>
</div>

推荐阅读