Question

我正在使用jquery创建一个下拉菜单（有些代码是从某人的教程中借来的，虽然我忘记了谁......）。当我使用下拉列表时，它会快速上下滑动，我无法弄明白。你觉得怎么样？

HTML

<div id="nav">
  <ul class="topnav">
   <li><a class="selected" href="#" title="home">home</a></li>
   <li><a href="events/" title="events calendar">events</a></li>
   <li><a href="photos/" title="photo gallery">photos</a></li>
   <li><a href="staff/" title="faculty">staff</a>
 <ul class="subnav">
   <li><a href="#">Luke</a></li>
   <li><a href="#">Darth Vader</a></li>
   <li><a href="#">Princess Leia</a></li>
   <li><a href="#">Jabba the Hutt</a></li>
 </ul>
</li>
<li><a href="contact/" title="contact">contact</a></li>

jQuery $（文件）。就绪（函数（）{ $（“ul.subnav”）。parent（）。hover（function（）{

 $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover...

 $(this).parent() .hover(function() {
 }, function(){ 
  $(this).parent().find("ul.subnav").slideUp('slow');
 });
 $(this).parent().find("ul.subnav") .hover(function() {
 }, function(){ 
  $(this).parent().find("ul.subnav").slideUp('slow');
 });

 }).hover(function() { 
  $(this).addClass("subhover");
 }, function(){ 
  $(this).removeClass("subhover"); 
});

Answer 1

您可以使用以毫秒为单位的速度，而不是“慢速”和“快速”。尝试slideUp（1000）（例如2000-3000）。它应该非常平滑地滑动。

Answer 2

这是1 lvl下拉列表的更简单版本，对于更多级别，它就像复制和粘贴一样简单，只需要修改一些样式。希望它能帮到你

<script type="text/javascript">
$(document).ready(function(){

$('.menu-option').hover(mouse_in, mouse_out);
function mouse_in(){
     $(' > div', this).slideDown("normal");
}
function mouse_out(){
        $(' > div', this).slideUp("fast");
}

});

</script>
      <style type="text/css">
ul div
{
    display: none;
}
div{
    display :table-cell;
    position: absolute;
}
.menu-option{
    display: block;
    float: left;
    width: 120px;

}
.menu-option ul{
    z-index: 100;
}
</style>


<ul>    <li class="menu-option"> MENU 1
            <div>
                <ul>
                    <li>sub menu 1 1 </li>
                    <li>sub menu 1 2 </li>
                    <li>sub menu 1 3 </li>
                </ul>
            </div>  </li>   <li class="menu-option"> MENU 1      <div>
                <ul>
                    <li>sub menu 1 1 </li>
                    <li>sub menu 1 2 </li>
                    <li>sub menu 1 3 </li>
                </ul>
            </div>  </li>
        <li class="menu-option"> MENU 1      <div>
                <ul>
                    <li>sub menu 1 1 </li>
                    <li>sub menu 1 2 </li>
                    <li>sub menu 1 3 </li>
                </ul>
            </div>  </li>
        <li class="menu-option"> MENU 1      <div>
                <ul>
                    <li>sub menu 1 1 </li>
                    <li>sub menu 1 2 </li>
                    <li>sub menu 1 3 </li>
                </ul>
            </div>  </li> </ul>

jQuery下拉列表真的很跳跃

2 个答案: