jquery - 创建垂直多级菜单

标签 jquery html css twitter-bootstrap

我正在尝试创建一个带有一些子菜单的垂直菜单栏。
这是我尝试过的。

<div  class="col-xs-2 col-sm-2">
  <ul class="nav nav-tabs">
   <li><a href="#">aaa</a>
   <ul>
   <li><a href="#">xxxxxxx</a></li>
   <li><a href="#">yyyyyyyy</a></li>
   <li><a href="#">cccccc</a></li>
   </ul>
   </li>
   <li><a href="#">bbb</a></li>
   <li><a href="#">ccc</a></li>

  </ul>
</div>

https://jsfiddle.net/ejt1xznu/

但是,当我点击主菜单时,子菜单显示不正确。我做错了什么?有人可以帮助我吗?
否则有什么办法可以正确使用 jquery 或 angular 吗?

最佳答案

HTML 中的大多数标签 都有一些默认样式,同样这里的ul 标签有一个默认样式padding-left: 40 像素;。将其重置为 padding-left:0px; 后,它会正确对齐其余链接。

默认 ul 样式,

ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

ul{
  padding:0;
}
ul ul>li {
  display:none;
}
ul li:active li{
  display:block;
}
<div  class="col-xs-2 col-sm-2">
  <ul class="nav nav-tabs">
   <li><a href="#">aaa</a>
   <ul>
   <li><a href="#">xxxxxxx</a></li>
   <li><a href="#">yyyyyyyy</a></li>
   <li><a href="#">cccccc</a></li>
   </ul>
   </li>
   <li><a href="#">bbb</a></li>
   <li><a href="#">ccc</a></li>

  </ul>
</div>

关于jquery - 创建垂直多级菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48072991/

相关文章:

HTML CSS - 如何很好地呈现 SQL

javascript - 如何对多个输入一起进行 if 参数?

javascript - 调用 jquery 事件处理程序超出范围

javascript - CSS 未应用于页面

html - 将文本放在 DIV 图片下

html - 电子邮件模板上未加载 CSS

javascript - 动画元素 Angular 不消失

javascript - 在隐藏的 div 中滑动

javascript - 为对话框获取值

javascript - div 中的可点击图像