Question

我希望在这个手风琴菜单上增加一个subnav。我试图将一个子元素添加到nav ul li中，但这似乎不起作用。理想情况下，我希望能够在＆＃34; web＆＃34;下列出网络项目。并打印＆＃34;打印＆＃34;。

FIDDLE：http://jsfiddle.net/schermerb/rGMAu/1/

.header button {
    cursor:pointer;
    float:right;
    padding:5px;
    margin:10px 10px;
    border:none;
    border:1px solid #ececec;
    background:#444;
    color:#ececec;
}
.nav {
    text-align:center;
    background:#444;
}
.nav ul li {
    text-transform:capitalize;
    display:block;
    border-bottom:1px solid #ececec;
}
.nav a {
    display:block;
    padding:10px;
    color:#ececec;
}
.nav a:hover {
    background:#029b9d;
    color:#ececec;
}

<button id="show">Menu <span>+</span>  <span style="display:none;">-</span>
</button>
<div class="clear"></div>
</div>
<div class="nav">
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Web</a>

        </li>
        <li><a href="#">Print</a>

        </li>
    </ul>
</div>

Answer 1

添加子元素是正确的道路。

http://jsfiddle.net/jonigiuro/rGMAu/2/

<li><a href="#">Web</a>
    <ul class="sub">
        <li class="item">item1</li>
        <li class="item">item2</li>
    </ul>
</li>

默认情况下隐藏子元素，当您将鼠标悬停在父元素上时，会显示它：

ul li:hover ul

以下是您案件的重要信息：

.nav ul li ul {
    color: red;
    margin: 0;
    padding: 0;
    display: none;
}

.nav ul li:hover ul {
    display: block;
}

.nav ul li ul li {
    padding: 10px 0;
}

Answer 2

我已更新你的js

$('.nav, .nav li ul').hide();
$('#show').click(function () {
    $(".nav").toggle();
    $("span").toggle();
});
$('.nav li').click(function(){
    $(this).children('ul').toggle();
});

<强> Updated jsFiddle File

将第二个子导航添加到手风琴样式菜单

2 个答案: