时间戳

首页 > 解决方案 > 添加

javascript - 添加
    在现有的内部

问题描述

<!DOCTYPE html>
<html>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a>
  <ul>
  <li>profile</li>
  <li>details</li>
  </ul></li>
</ul>


</body>
</html>

我的标题中有这个简单li的菜单。我只是想添加子列表，就像我点击about子列表时应该显示的那样。我该怎么做？

标签： javascriptjqueryhtmltwitter-bootstrap

解决方案

About您可以通过更改其display属性使其最初隐藏并在单击时显示它（display: none使其隐藏并display: block显示它）。

<!DOCTYPE html>
<html>
<body>

  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about" onClick="showAbout()">About</a>
      <ul style="display: none;" id="about">
        <li>profile</li>
        <li>details</li>
      </ul>
    </li>
  </ul>
  <script>
    function showAbout() {
      document.getElementById("about").style.display = "block";
    }
  </script>

</body>
</html>

如果要切换About子菜单的可见性，可以在每次单击时检查子菜单的display属性。AboutAbout

<!DOCTYPE html>
<html>
<body>

  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about" onClick="showAbout()">About</a>
      <ul style="display: none;" id="about">
        <li>profile</li>
        <li>details</li>
      </ul>
    </li>
  </ul>
  <script>
    function showAbout() {
      var about = document.getElementById("about");
      if (about.style.display === "none") {
        about.style.display = "block";
      } else {
        about.style.display = "none";
      }
    }
  </script>

</body>
</html>

推荐阅读