javascript - 将第二个子导航添加到 Accordion 样式菜单

Question

我正在寻找此 Accordion 菜单的附加子导航。我试图向 nav ul li 添加一个子元素，但这似乎没有用。理想情况下，我希望能够在“web”下列出 Web 元素并在“print”下打印。

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

我已经更新了你的js

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

Updated jsFiddle File