Question

所以当我点击导航栏中的“Home”时，我为我的菜单设置了切换功能，它触发了它的功能并显示其子菜单没有问题但是当我点击“关于”它应该显示它自己的子菜单但是相反，它触发“主页”按钮功能并显示“主页”按钮子菜单。请参阅代码段。

    let getToggle = document.querySelector(".toggle");
    let getLi = document.querySelector(".submenu");

function showHide () {

    if (getToggle.class == "toggle") {

        getLi.style.height = "0px";
        getLi.style.opacity = "0";
        getLi.style.visibility = "hidden";
        getToggle.class = "";
    } else {

        getLi.style.height = "110px";
        getLi.style.opacity = "1";
        getLi.style.visibility = "visible";
        getToggle.class = "toggle";
    }
}

 * {
    margin:0;
    padding:0;
 }

body {
    background-color:whitesmoke;
    font-family:arial;
}

nav {
    background-color:white;
}

nav ul {
    list-style: none;
    transition:0.4s;
}

nav ul li {
      padding:5px 10px;
      display: inline-block;;
}

nav ul li a {
    text-decoration: none;;
    color:grey;
}

nav ul li ul {
    position: absolute;
    width:100px;
    background-color:white;
    margin-left:-10px;
    visibility: hidden;
    height:0px;
    opacity:0;
}

<nav>
    <ul>
        <li ><a href="#">Home</a>
        <a class="toggle" onclick="showHide()">&#9658;</a>
            <ul class="submenu">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a>
        <a class="toggle" onclick="showHide()">&#9658;</a>
            <ul class="submenu">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

更新了脚本，仅在目标元素上应用样式。

  function showHide(event) {

    var getToggle = event.target;
    var getLi = event.target.nextElementSibling;
    if (getToggle.class == "toggle") {

      getLi.style.height = "0px";
      getLi.style.opacity = "0";
      getLi.style.visibility = "hidden";
      getToggle.class = "";
    } else {

      getLi.style.height = "110px";
      getLi.style.opacity = "1";
      getLi.style.visibility = "visible";
      getToggle.class = "toggle";
    }
  }

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: whitesmoke;
  font-family: arial;
}

nav {
  background-color: white;
}

nav ul {
  list-style: none;
  transition: 0.4s;
}

nav ul li {
  padding: 5px 10px;
  display: inline-block;
  ;
}

nav ul li a {
  text-decoration: none;
  ;
  color: grey;
}

nav ul li ul {
  position: absolute;
  width: 100px;
  background-color: white;
  margin-left: -10px;
  visibility: hidden;
  height: 0px;
  opacity: 0;
}

<nav>
  <ul>
    <li><a href="#">Home</a>
      <a class="toggle" onclick="showHide(event)">&#9658;</a>
      <ul class="submenu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a>
      <a class="toggle" onclick="showHide(event)">&#9658;</a>
      <ul class="submenu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
      </ul>
    </li>
  </ul>
</nav>

<script>
  function showHide(event) {

    getToggle = event.target
    getLi = event.target.nextElementSibling;
    if (getToggle.class == "toggle") {

      getLi.style.height = "0px";
      getLi.style.opacity = "0";
      getLi.style.visibility = "hidden";
      getToggle.class = "";
    } else {

      getLi.style.height = "110px";
      getLi.style.opacity = "1";
      getLi.style.visibility = "visible";
      getToggle.class = "toggle";
    }
  }
</script>

Javascript子菜单切换无法正常工作

1 个答案: