滑動菜單問題

我有一個導航菜單，其子菜單在滑動時滑落。菜單的結構如下所示：滑動菜單問題

<ul class='nav'> 
    <li><a href='#'>About</a></li> 
    <ul class='submenu'> 
    <li><a href='#'>Stuff</a></li> 
    </ul> 
</ul>

等。

我所做的創建slideouts是以下幾點：

$('ul.nav li').hover(function(){ 
    $el = $(this); 
    $el.next('.submenu').slideToggle(); # they all have submenus, so this works for now 
},function(){ 
    $el = $(this); 
    $el.next('.submenu').slideToggle(); 
});

但是，使用這種方法，將摺疊子菜單，當你的鼠標關閉主要的李。我通過刪除mouseout上的摺疊來解決這個問題，然後爲子菜單創建了一個mouseout事件（即：當鼠標離開子菜單時，它會摺疊）。但是，在這種設置中，如果您碰巧將鼠標移動到了主LI上，那麼在沒有鼠標進入菜單的情況下，子菜單保持打開（顯然）。

我應該如何解決這個問題，這種方式能夠正常工作，並且讓我能夠優雅地降級？

注：我也試圖包含利內的UL（< LI> < A HREF>東西</A> < UL類= '子菜單'> < LI> </LI> </UL>），但我需要子菜單隱藏在主LI圖像後面，並且在該設置中使用z-index是不可能的）。

來源

2010-08-17 Brad Herman

你應該調整你的代碼位是有效的，以及像這樣：

<ul class='nav'> 
    <li><a href='#'>About</a> 
    <ul class='submenu'> 
     <li><a href='#'>Stuff</a></li> 
    </ul> 
    </li> 
</ul>

與異索引你有這個，我不理解的錯誤...你應該添加或請特意提出一個新問題，因爲你的HTML 應該是就是這樣。

這可以讓你懸停在相同的元素內... <ul>無論如何不可能是<ul>的孩子，它是無效的HTML（即使瀏覽器通常會渲染它）。

然後你可以使用jQuery這樣的：

$('ul.nav li').hover(function(){ 
    $(this).children('.submenu').stop(true, true).slideToggle(); 
});

You can give it a try here，該.stop()呼叫除了是爲了防止動畫隊列中積聚。

來源

2010-08-17 20:26:48

這裏是一個例子

<style type="text/css"> 
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited 
    { 
     border: 1px solid orange; 
     color: white; 
     background-color: orange; 
    } 
    .menucontrol a:hover 
    { 
     background-color: #fff; 
     color: #333; 
    } 
    .menucontrol, .menucontrol ul 
    { 
     margin: 0; 
     padding: 0; 
     list-style-type: none; 
     list-style-position: outside; 
     position: relative; 
     line-height: 1.5em; 
    } 
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited 
    { 
     display: block; 
     padding: 0px 5px; 
     text-decoration: none; 
    } 
    .menucontrol li 
    { 
     float: left; 
     position: relative; 
    } 
    .menucontrol ul 
    { 
     position: absolute; 
     width: 12em; 
     top: 1.5em; 
     display: none; 
    } 
    .menucontrol li ul a 
    { 
     width: 12em; 
     float: left; 
    } 
    .menucontrol ul ul 
    { 
     top: auto; 
    } 
    .menucontrol li ul ul 
    { 
     left: 12em; 
     margin: 0px 0 0 10px; 
    } 
    .menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul 
    { 
     display: none; 
    } 
    .menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul 
    { 
     display: block; 
    } 
</style> 

<body style="font-family: Consolas; font-size: 11px;"> 
<ul class="menucontrol"> 
    <li><a href="#">1 HTML</a></li> 
    <li><a href="#">2 CSS</a></li> 
    <li><a href="#">3 Javascript</a> 
     <ul> 
      <li><a href="#">3.1 jQuery</a> 
       <ul> 
        <li><a href="#">3.1.1 Download</a><ul> 
         <li><a href="#">3.1.1 Download</a><ul> 
          <li><a href="#">3.1.1 Download</a></li> 
          <li><a href="#">3.1.2 Tutorial</a></li> 
         </ul> 
         </li> 
         <li><a href="#">3.1.2 Tutorial</a></li> 
        </ul> 
        </li> 
        <li><a href="#">3.1.2 Tutorial</a></li> 
       </ul> 
      </li> 
      <li><a href="#">3.2 Mootools</a></li> 
      <li><a href="#">3.3 Prototype</a></li> 
     </ul> 
    </li> 
</ul>

<script type="text/javascript"> 
function mainmenu() 
{ 
    $(" .menucontrol ul ").css({ display: "none" }); // Opera Fix 
    $(" .menucontrol li").hover(function() 
    { 
     $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400); 
    }, function() 
    { 
     $(this).find('ul:first').css({ visibility: "hidden" }); 
    }); 
} 

$(document).ready(function() 
{ 
    mainmenu(); 
});

來源

2010-08-17 22:39:36

滑動菜單問題

回答

相關問題