全寬子菜單與推內容下降

我已經創建了一個菜單，我想在這裏實現的是一個全寬子菜單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 / –

全寬子菜單與推內容下降

回答

相關問題