悬停时显示/隐藏级联菜单元素

当用户在特定元素上移动鼠标时，需要显示/隐藏级联菜单。使用悬停功能，使用jquery很容易实现：
N.B：计时器仅用于在200ms后隐藏菜单，并不重要。悬停时显示/隐藏级联菜单元素

$(document).ready(function() { 
    var timer; 
    $('.element,.cascading_menu').hover(function(){ 
     clearTimeout(timer); 
     $('.cascading_menu').show(); 
    }, function(){ 
     timer = setTimeout(function(){$('.cascading_menu').hide();},200); 
    }); 
});

我必须为每个我想隐藏的菜单重复此代码。
但由于我有很多菜单，我想减少代码长度。

我的想法是使用“id悬停的元素：id菜单来显示/隐藏”的数组。
你认为有可能编写一个jQuery函数，给定这个元素数组，提供显示每个菜单，而不必编写代码十几次？

来源

2014-04-06 Andy Wall

你能提供一个小提琴吗？ – Anubhav

你可以删除'setTimeout'，而是使用'。延迟（200）'（我知道你说的那部分并不重要，但它可以节省几行） – royhowie

非常感谢您的回答级联无限深:-)。最后，我写了这段代码，它工作得很好。问题是显示的元素不是元素的子元素，所以我创建了两个数组，其中一个元素悬停，另一个元素显示，并将所有元素与所有的函数组合在一起。这里是代码：

$(document).ready(function() { 

     var timer; 
     var h1=["prof","notif_cont","explo"]; 
     var h2=[".profile",".notification",".explore"]; 
     $('.hover').hover(
      function(){ 
       var hoverrato=$(this).children(':first'); 
       $.each(h1, function(indice,checker){ 
        if($(hoverrato).hasClass(checker)){ 
         var index_hov=indice; 
         ul_show=h2[index_hov]; 
         clearTimeout(timer); 
         $(ul_show).show(65); 
        } 
       }); 

      }, 
      function(){ 
       timer = setTimeout(function(){$(ul_show).hide(65);},200); 
      }); 

});

来源

2014-04-07 17:02:53

您可以使用this，以便您可以对所有元素使用相同的代码，但这一切都取决于您的html代码格式。

Here is an example.

$(document).ready(function() { 
    $('.element').hover(function(){ 
     $(this).find(".cascading_menu").stop().slideDown(); 
    }, function(){ 
     $(this).find(".cascading_menu").delay(200).slideUp(); 
    }); 
});

注：您还可以使用delay(ms)，而不是一个计时器。

来源

2014-04-06 21:32:29

我会设置它为this，它将为具有深度的菜单工作，假设每个<li class="hoverli">都带有一个子菜单，该子菜单是一个无序列表（<ul class="file_menu">）。 pass a duration（即零）至.hide()或.delay()will not work很重要，因为它没有使用没有设定持续时间的效果队列。

HTML：

<div id="button"> 
    <ul class="hover"> 
     <li class="hoverli">Hover over me! 
      <ul class="file_menu"> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li>     
      </ul> 
     </li> 
     <li class="hoverli">or me! 
      <ul class="file_menu"> 
       <li class="hoverli">submenu! 
        <ul class="file_menu"> 
         <li>A</li> 
         <li>B</li> 
         <li>C</li> 
         <li>D</li> 
        </ul> 
       </li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li>     
      </ul> 
     </li> 
    </ul> 
</div>

的JavaScript：

$(".hoverli").hover(function(){ 
    $(this).find("ul").show(); 
}, function(){ 
    $(this).find("ul").delay(200).hide(0); 
});

CSS：

ul, li { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
.menu_class { 
    border:1px solid #1c1c1c; 
} 
.file_menu { 
    display:none; 
    width:300px; 
    border: 1px solid #1c1c1c; 
} 
.file_menu li { 
    background-color: white; 
}

来源

2014-04-06 21:50:58 royhowie

下面是一个很好的例子“Windows 7的”风格级联菜单Fiddle

$(function(){ 
    $('.hasDropdown').hover(function(){ 
     $(this).find('ul:first').show(); 
    },function(){ 
     $(this).find('ul').hide(); 
    }) 

});

它会在理论上

来源

2014-04-06 21:52:58

悬停时显示/隐藏级联菜单元素

回答

相关问题