全宽子菜单与推内容下降

我已经创建了一个菜单，我想在这里实现的是一个全宽子菜单whcig推动点击内容并显示子菜单。我有一个问题快速全宽子菜单，也当我点击前面的菜单内容仍然显示。这里是我的小提琴：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%; 
}

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

来源

2016-02-25 Shahil M

我相信，问题是你不希望菜单自动关闭，当你删除光标？或者是别的什么？ –

问题是，当我点击link1子菜单显示，但是当我点击link2 link2子菜单link1 sumenu都显示出来。我试图在点击时实现全宽子菜单。像一个巨大的菜单 –

似乎对我很好。就像当我点击link1时，link1的子菜单显示，我点击link2，link1子菜单关闭并显示link2。 http://jsfiddle.net/1xd1hfdy/ –

对不起，也许我误解了你的问题。当你想要全宽子菜单，你只需要设置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>

来源

2016-02-25 06:38:10

感谢您的方法，但这是我想要实现http://postimg.org /图像/ 96bumjezf / –

全宽子菜单与推内容下降

回答

相关问题