内含无序列表的无序列表 HTML 列表。彼此缠绕答案

【问题标题】：unordered HTML list with unordered list inside. Wrapped next each other内含无序列表的无序列表 HTML 列表。彼此缠绕
【发布时间】：2012-03-11 22:16:24
【问题描述】：

我得到一个我想要设置样式的 cms 的无序列表。它运行良好，但仅适用于第一个 <li id="link-18"> 元素。我的目标是设计<ul> 块的样式，就像第一个一样。请参阅http://jsfiddle.net/UyrdS/3/（第二和第三个链接显示切换的<ul> 块不在顶部）

如果单击第二个链接（第 2 级，第 2 级），切换后的新 <ul> 块会显示在导航旁边，但不像第 1 级链接那样在顶部显示其子元素 <ul>

【问题讨论】：

标签： html css html-lists

【解决方案1】：

你可以改变你的 CSS 来生成一个漂亮的子菜单

nav ul>li>ul {
  display: none;
  margin-left:2em;
}

查看http://jsfiddle.net/WrcMX/上的示例

【讨论】：

【解决方案2】：

我认为this 是你想要的

alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
    alllinks.hide(); //First hide all the links
    e.preventDefault();
    if ($(this).parent().children('ul').size() > 0) {
        $(this).parent().children('ul').toggle();
    }
});

【讨论】：

【解决方案3】：

我放弃了。我是一个更糟糕的询问者:) 感谢您的回答。感谢大家花时间。这个小提琴最接近我的问题。

http://jsfiddle.net/UyrdS/6/

但它不是动态的。它具有静态宽度。这仍然是个问题。

【讨论】：