使滑動下拉菜單也滑動父母

所以我想創建一個滑動下拉菜單，其中父項與該項滑落。我想要做的唯一方法是讓主菜單項位於底部，子項位於頂部。這不是首選，但它似乎工作。使滑動下拉菜單也滑動父母

現在的問題是，如果您將鼠標懸停在錯誤的部分上，菜單似乎會跳動/不平滑。有沒有辦法讓主菜單項在頂部，並阻止它變得如此跳躍？

一個jsFiddle在這裏

下面是HTML：

<ul> 
    <ul> 
     <li> Menu 1 </li> 
     <li> Menu 2 </li> 
    </ul> 
     <li> Main Menu Item </li> 
</ul> 
<ul> 
    <ul> 
     <li> Menu 1 </li> 
     <li> Menu 2 </li> 
    </ul> 
     <li> Main Menu Item 2 </li> 
</ul>

而CSS：

ul ul li { 
    display: none; 
} 

ul { 
    display:inline; 
    float:left; 
    width:150px; 
}

最後jQuery的

$("ul").hover(

function() { 
    $(this).find('ul li').stop(true, true).slideDown(); 
}, function() { 
    $(this).find('ul li').stop(true, true).slideUp(); 
} 

);

編輯

所以它似乎其中一個probems是無效的標記。建議只使用Javascript將第一個li標籤移動到該部分的底部。我有一個只能在第一個點擊點擊的例子。那個小提琴可以找到here理想情況下，我希望它不用點擊和有效的標記工作。

這裏是更新JS

$("ul li:first").click(function() { 

    $(this).parent().append($(this)); 

}); 

$("ul").hoverIntent(
function() { 
    $(this).find('ul li').stop(true, true).slideDown(); 
}, function() { 
    $(this).find('ul li').stop(true, true).slideUp(); 
} 

);

來源

2012-09-26 BandonRandon

你總是可以嘗試hoverIntent插件:) http://cherne.net/brian/resources/jquery.hoverIntent.html –

看來贏家是這個JavaScript

$("ul li:first-child").not("ul li li").hover(function() { 

    $(this).parent().append($(this)); 

}); 

$("ul").hoverIntent(
function() { 
    $(this).find('ul li').stop(true, true).slideDown(); 
}, function() { 
    $(this).find('ul li').stop(true, true).slideUp(); 
} 

);

來源

2012-10-08 07:00:33 BandonRandon

嘗試此解決方案

HTML

<nav id="verticalmenu">   
<ul> 
    <li> 
     <ul class="down"> 
     <li><a href="#">Menu#1-1</a></li> 
     <li><a href="#">Menu#1-2</a></li> 
     <li><a href="#">Menu#1-3</a></li> 
     </ul> 
     <a class="slide" href="#">Menu#1</a> 
    </li> 
    <li> 
     <ul class="down"> 
     <li><a href="#">Menu#2-1</a></li> 
     <li><a href="#">Menu#2-2</a></li> 
     <li><a href="#">Menu#2-3</a></li> 
     </ul> 
     <a class="slide" href="#">Menu#2</a> 
    </li> 
</ul>

var nav = $("#verticalmenu"); 
    //add hovers to submenu parents 
    nav.find("li").each(function() { 
     var li_ul = $(this).find("ul"); 
      li_ul.hide(); 
      //show subnav on hover 
      $(this).mouseenter(function() { 
       li_ul.stop(true, true).slideDown(); 
      }); 
    }); 


    nav.find("li").each(function() { 
     var li_ul = $(this).find("ul"); 
      li_ul.hide(); 
      //show subnav on hover 
      $(this).mouseleave(function() { 
       li_ul.stop(true, true).slideUp(); 
      }); 
    });

來源

2012-09-26 17:56:24

使滑動下拉菜單也滑動父母

回答

相關問題