javascript - 打开下拉菜单时如何在正确位置反转箭头图标？ Javascript

Question

如何在打开下拉菜单时在左侧设置箭头图标？默认位置是正确的，但是当单击并打开下拉菜单时，我想在左侧显示图标。看图片示例:

1. 默认 -> https://ibb.co/0CDrkRN
2. 单击并打开附加菜单时 -> https://ibb.co/QkW9YDt

我再举一个例子:

模具统计>

模具统计2 >

:点击 die Stats 或 die Stats2 :

<模具统计

:箭头切换到左边位置:

看我的代码:

<div class="first-lower-div">
  <div class="low-lower">
    <div class="dropdown">
      <button class="dropbtn dropbtn-one">
                                                                                                                                            Staatskunde Grundbegriffe
                                                                                                                                            <i class="fa fa-caret-down"></i>
                                                                                                                            </button>
      <div class="dropdown-content">
        <ul>
          <li class="item-has-children">
            <a href="#0">Main Item One <span class="rightt">  </span></a>
            <ul class="sub-menu">
              <li><a href="#">Sub Item One  <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
            </ul>
          </li>

          <div class="hr2"></div>
          <li class="item-has-children">
            <a href="#0">Main Item Two <span class="rightt">  </span></a>
            <ul class="sub-menu">
              <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
            </ul>
          </li>

          <div class="hr2"></div>
          <li class="item-has-children">
            <a href="#0">Main Item Three <span class="rightt">  </span></a>
            <ul class="sub-menu">
              <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>


  </div>
  <div class="low-lower">
    <div class="dropdown">
      <button class="dropbtn dropbtn-two">
                                                                                                                                            Staatskunde Grundbegriffe
                                                                                                                                            <i class="fa fa-caret-down"></i>
                                                                                                                            </button>
      <div class="dropdown-content">
        <ul>
          <li class="item-has-children">
            <a href="#0">Main Item One <span class="rightt">  </span></a>
            <ul class="sub-menu">
              <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
            </ul>
          </li>

          <div class="hr2"></div>
          <li class="item-has-children">
            <a href="#0">Main Item Two <span class="rightt">  </span></a>
            <ul class="sub-menu">
              <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
            </ul>
          </li>

          <div class="hr2"></div>
          <li class="item-has-children">
            <a href="#0">Main Item Three <span class="rightt">  </span></a>
            <ul class="sub-menu">
              <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="low-lower">
    <div class="dropdown">
      <button class="dropbtn dropbtn-three">
                                                                                                                                            Staatskunde Grundbegriffe
                                                                                                                                            <i class="fa fa-caret-down"></i>
                                                                                                                            </button>
      <div class="dropdown-content">
        <ul>
          <li class="item-has-children">
            <a href="#0">Main Item One <span class="rightt">  </span></a>
            <ul class="sub-menu">
              <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
            </ul>
          </li>

          <div class="hr2"></div>
          <li class="item-has-children">
            <a href="#0">Main Item Two <span class="rightt">  </span></a>
            <ul class="sub-menu">
              <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
            </ul>
          </li>

          <div class="hr2"></div>
          <li class="item-has-children">
            <a href="#0">Main Item Three <span class="rightt">  </span></a>
            <ul class="sub-menu">
              <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
              <div class="hr2"></div>
              <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>


</div>

Javascript:

const links = document.querySelectorAll(".item-has-children");
links.forEach((link) => {
  link.addEventListener('click', (e) => {
    if (e.target.nextElementSibling.classList.contains('selected')) {
      e.target.nextElementSibling.classList.remove('selected')
    } else {
      e.target.nextElementSibling.classList.add('selected')
    }
  })
})

CSS:

.section-two {
    padding: 0 30px;
    .header-holder {
        display: flex;
        justify-content: center;
        padding: 40px 0px;
        h3 {
            font-size: 30px;
            font-family: 'Replica Regular', Arial, sans-serif;
            font-weight: 600;
            color: #666;
        }
    }
    .wrapper-two {
        display: flex;
        flex-direction: column;
        .first-div-holder {
            background: brown;
            display: flex;
            flex-direction: column;
        }
        .first-lower-div {
            display: flex;
            justify-content: space-around;
            .low-lower {
                p {
                    color: white;
                }
            }
            @media (max-width: 980px) { 
                flex-direction: column;
                align-items: center;
                width: 100%;
              }
        }
        .second-lower-div {
            text-align: center;
            padding: 150px;
            h1 {
                font-size: 80px;
                color: white;
            }
            h4 {
                font-size: 30px;
                margin-top: -50px;
                color: white;
            }
        }
        .third-lower-div {
            display: flex;
            margin-bottom: 30px;
            text-align: right;
            justify-content: center;
            justify-content: space-evenly;
            .bottom-lower {
                display: flex;
                align-content: center;
                &:nth-child(1),
                &:nth-child(2),
                &:nth-child(3),
                &:nth-child(4) {
                    display: flex;
                    align-items: center;
                    color: white;
                }
            }
            p {
                color: white;
                font-weight: 600;
                font-size: 16px;
                margin: 0 10px;
            }
            @media (max-width: 700px) { 
                flex-direction: column;
                align-items: center;
                width: 100%;
              }
        }
        .second-div-holder {
            background: #f1f1f1; 
            .second-div-holder-div {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding: 15px; 
                .div-column {
                    flex: 1;
                    min-width: 30%;
                    padding: 25px;
                    overflow: hidden;
                    // for small device 
                    // flex: 0 0 100%;
                    // max-width: 100%;
                    @media (max-width: 600px) {  
                        min-width: 100%!important;
                      }
                      @media (max-width: 1000px) and (min-width: 600px)  {  
                        min-width: 50%!important;
                      }

                    .div-column-first {
                        height: 210px;
                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                        }
                        #first-child-image {
                            border-bottom: 5px solid blue;
                        }
                        #second-child-image {
                            border-bottom: 5px solid red;
                        }
                        #third-child-image {
                            border-bottom: 5px solid yellow;
                        }
                    }
                    .div-column-second {
                        padding: 40px;
                        background: white;
                        text-align: center;
                    }
                }
            }
        }
    }
}

.dropdown {
    position: relative;
    display: inline-block;

    .dropbtn {
        background-color: blue;
        color: white;
        font-size: 17px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        height: 55px;
        background: #153161;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        padding: 12px 50px;

        i {
            margin-left: 30px;
            color: #8391ab;
        }
        .arrow {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #8191aa;
            margin: 100%;
            padding-top: 4px;
            z-index: 999;
        }
    }
    .dropbtn-two {
        background: red;
    }
    .dropbtn-three {
        background: yellow;
    }
}

.dropdown-content {

    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    width: 330px;
    z-index: 999;
    a {
        color: black;
        padding: 12px 25px;
        text-decoration: none; 
        display: flex;
        justify-content: flex-start;
        width: 100%;
        &:hover {
            background-color: #F8F8F8
        }
    }
    .rightt { 
            display: inline-block;
            // width: 9px;
            // height: 9px;
            cursor: pointer;
            // padding-left: 180px;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            &:after {
                content: '';
                display: inline-block;
                width: 9px;
                height: 9px;
                border-top: 0.2em solid #ababab;
                border-right: 0.2em solid #ababab;
                -moz-transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            } 
    }
    .left {

            display: inline-block;
            // width: 9px;
            // height: 9px;
            cursor: pointer;
            // padding-left: 180px;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            &:after {
                content: '';
                display: inline-block;
                width: 29px;
                height: 29px;
                border-top: 0.2em solid #ababab;
                border-right: 0.2em solid #ababab;
                -moz-transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            } 

    }
    .item-has-children {
        a {
            position: relative;
        }
    }
}

.dropdown:hover .dropdown-content {
    display: block;
    background: white;
    opacity: 0.8;
    width: 100%;

}

.hr2 {
    height: 1px;
    background: #ccc;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #ccc;
}

.sub-menu {
    display: none;
}
.sub-menu.selected {
    display: flex;
    flex-direction: column; 
    transition: transform 0.6s;  
}

ul {
    list-style: none;
    padding: 0 5px;
    width: 100%;
    height: 100%;    
}

const links = document.querySelectorAll(".item-has-children");
links.forEach((link) => {
  link.addEventListener('click', (e) => {
    if (e.target.nextElementSibling.classList.contains('selected')) {
      e.target.nextElementSibling.classList.remove('selected')
    } else {
      e.target.nextElementSibling.classList.add('selected')
    }
  })
})

.dropdown {
  position: relative;
  display: inline-block;
  .dropbtn {
    background-color: $facebookBlue;
    color: $white;
    font-size: 17px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    height: 55px;
    background: #153161;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: 12px 50px;
    i {
      margin-left: 30px;
      color: #8391ab;
    }
    .arrow {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #8191aa;
      margin: 100%;
      padding-top: 4px;
      z-index: 999;
    }
  }
  .dropbtn-two {
    background: $strongRed;
  }
  .dropbtn-three {
    background: $strongYellow;
  }
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width: 330px;
  z-index: 999;
  a {
    color: black;
    padding: 12px 25px;
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    &:hover {
      background-color: #F8F8F8
    }
  }
  .rightt {
    display: inline-block;
    // width: 9px;
    // height: 9px;
    cursor: pointer;
    // padding-left: 180px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    &:after {
      content: '';
      display: inline-block;
      width: 9px;
      height: 9px;
      border-top: 0.2em solid #ababab;
      border-right: 0.2em solid #ababab;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }
  .item-has-children {
    a {
      position: relative;
    }
  }
}

.dropdown:hover .dropdown-content {
  display: block;
  background: white;
  opacity: 0.8;
  width: 100%;
}

.hr2 {
  height: 1px;
  background: #ccc;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #ccc;
}

.sub-menu {
  display: none;
}

.sub-menu.selected {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s;
}

ul {
  list-style: none;
  padding: 0 5px;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.0/sass.min.js" integrity="sha256-1MTlXahXbxCpbv9RxO9Qx96oBa3f1cEXH0GU4AS+TU0=" crossorigin="anonymous"></script>
<div class="dropdown">
  <button class="dropbtn dropbtn-one">
            Staatskunde Grundbegriffe
            <i class="fa fa-caret-down"></i>
        </button>
  <div class="dropdown-content">
    <ul>
      <li class="item-has-children">
        <a href="#0">Main Item One <span class="rightt">  </span></a>
        <ul class="sub-menu">
          <li><a href="#">Sub Item One  <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
        </ul>
      </li>

      <div class="hr2"></div>
      <li class="item-has-children">
        <a href="#0">Main Item Two <span class="rightt">  </span></a>
        <ul class="sub-menu">
          <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
        </ul>
      </li>

      <div class="hr2"></div>
      <li class="item-has-children">
        <a href="#0">Main Item Three <span class="rightt">  </span></a>
        <ul class="sub-menu">
          <li><a href="#">Sub Item One <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Two <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Three <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Four <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Five <span class="rightt">  </span></a></li>
          <div class="hr2"></div>
          <li><a href="#">Sub Item Six <span class="rightt">  </span></a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

你可以用这个CSS:

.sub-menu.selected .rightt {
  float:left;    // to shift to left
  transform: rotate(180deg);   to rotate the icon
}

或使用边距或使用相同的技术进行变换