Javascript 具有向下推内容的全宽子菜单

我已经创建了一个菜单，我试图在这里实现的是一个全宽度的子菜单，它在单击时推送内容并显示子菜单。我在设置全宽子菜单时遇到问题，而且当我单击上一个菜单时，仍然会显示内容。这是我的小提琴：

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>

JS

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%;
}

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

---

对不起，也许我误解了你的问题。 如果需要全宽子菜单，只需设置CSS属性宽度：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>

链接1

链接1
链接2
链接3


链接1
链接2
链接3


链接2

链接1
链接2
链接3


链接3

链接1
链接2
链接3



内容

我认为，问题在于当您移除光标时，您不希望菜单自动关闭的位置？或者是其他原因？问题是当我点击link1时，子菜单会显示，但是当我点击link2时，子菜单link2也会显示link1菜单。我试图实现全宽度的子菜单点击。就像一个大男人对我很好。当我单击link1时，link1的子菜单显示，当我单击link2时，link1子菜单关闭并显示link2。这是我试图创建的示例，感谢您的方法，但这正是我试图实现的