代码之家 › 专栏 › 技术社区 › krish

在现有的内部添加<ul>

twitter-bootstrap html jquery javascript

krish · 技术社区 · 6 年前

<!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 应显示子列表。我该怎么做?

2 回复 | 直到 6 年前

404 Not Found 6 年前

你可以 add remove class 视情况而定。

$("a").on("click",function(e){
 if($(e.target).attr('href') == '#about'){
    $("#add").addClass('show');
    $("#add").removeClass('hide');
 }
})

.hide{
    display: none;
}
.show{
 display:block;
}
#add{
    position:absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id="add" class="hide" >
  <li>profile</li>
  <li>details</li>
  </ul></li>
</ul>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

编辑当你想出现的时候 ul 单击后位于文本顶部。

brooksrelyt Ozal Zarbaliyev 6 年前

您可以使其初始隐藏并在 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>

如果要切换 关于 子菜单的可见性,可以检查 显示 性质 关于 每次子菜单 关于 点击。

<!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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前