[英]Show/Hide cascading menu while hovering element
当用户在某个元素上移动鼠标时,我需要显示/隐藏级联菜单。 使用hover函数,使用jquery可以很容易地实现这一点:
注意:计时器仅用于在200毫秒后隐藏菜单,并不重要。
$(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函数,在给定此元素数组的情况下,该函数可以显示每个菜单,而无需多次编写该代码?
您可以使用this
代码,以便可以对所有元素使用相同的代码,但这完全取决于您的html代码格式。
$(document).ready(function() {
$('.element').hover(function(){
$(this).find(".cascading_menu").stop().slideDown();
}, function(){
$(this).find(".cascading_menu").delay(200).slideUp();
});
});
注意:您也可以使用delay(ms)
代替计时器。
我将像这样进行设置,只要每个<li class="hoverli">
带有子菜单的子菜单都是无序列表( <ul class="file_menu">
),它将对具有深度的菜单<ul class="file_menu">
。 到是很重要的传递持续时间 (即零)到.hide()
或.delay()
将无法工作 ,因为它不没有在设定时间使用效果队列。
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;
}
这是“ Windows 7”样式级联菜单小提琴的一个很好的例子
$(function(){
$('.hasDropdown').hover(function(){
$(this).find('ul:first').show();
},function(){
$(this).find('ul').hide();
})
});
它会无限深地级联:-)理论上
非常感谢您的回答。 最后,我编写了这段代码,效果很好。 问题在于要显示的元素不是该元素悬停的儿子,因此我创建了两个数组,一个数组具有悬停的元素,另一个数组具有要显示的元素,并将所有与$ .each函数结合在一起。 这是代码:
$(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);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.