javascript - 向下推内容的全宽子菜单

Question

我已经创建了一个菜单，我在这里想要实现的是一个全宽子菜单，whcig 在点击时推送内容并显示子菜单。我在创建全宽子菜单时遇到问题，而且当我单击上一个菜单内容时仍然显示。这是我的 fiddle :http://jsfiddle.net/he4a0eL4/1/

HTML

<div id="wrapper">
    <ul id="nav">
        <li>link1
            <div class="sub">
                <ul>
                    <li>link1</li>
                    <li>link2</li>
                    <li>link3</li>
                </ul>
            </div>
        </li>
        <li>link2
            <ul class="sub">
                <li>link1</li>
                <li>link2</li>
                <li>link3</li>
            </ul>
        </li>
        <li>link3
            <ul class="sub">
                <li>link1</li>
                <li>link2</li>
                <li>link3</li>
            </ul>
        </li>
    </ul>
    <div class="clear"></div>
</div>
<div class="content">content</div>

CSS

body{margin:0;}
    #wrapper{background:#ccc;}
ul{
    margin:0;
    padding:0;
    list-style:none;
}

#nav > li
{
    float:left;
    position:relative;
}

.sub
{
    display:none;
    widh:100%;
}
.clear
{
clear:both;
}
.content
{
height:300px;
    background:#ff0000;
    width:100%;
}

JS

$(document).ready(function() {
    $("#nav > li", this).click(function() {
        $(this).find(".sub").slideToggle();
    });
});

Answer 1

抱歉，我可能误解了你的问题。 当你想要全宽子菜单时，你只需要设置 CSS 属性 width:100%;，或者不是吗？这是你所期望的吗？

<div id="wrapper">
<ul id="nav">
    <li>link1
        <div class="sub">
          <ul style="float:left;width:100%;">
              <li>link1</li>
              <li>link2</li>
              <li>link3</li>
          </ul>
          <ul style="float:left;width:100%;">
              <li>link1</li>
              <li>link2</li>
              <li>link3</li>
          </ul>
        </div>
    </li>
    <li>link2
        <ul class="sub">
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
        </ul>
    </li>
    <li>link3
        <ul class="sub">
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
        </ul>
    </li>
</ul>
<div class="clear"></div>
</div>
<div class="content">content</div>