[英]Drop-Down Menu with jQuery
I'm working on an Drop-Down Menu but without success. 我正在制作一个下拉菜单,但没有成功。
I want the same function like the Drop-Down menu by Sony .I have even tried to imitate this effect, but I had a few difficulties. 我想要像索尼的下拉菜单一样的功能。我甚至试图模仿这种效果,但我遇到了一些困难。
My HTML: 我的HTML:
<div id="main_menu">
<div id="main_menu_container">
<div id="main_menu_links">
<a href="" class="main_menu_link">Startseite</a>
<a id="drop_down_link1" class="main_menu_link">Events</a>
<a id="drop_down_link2" class="main_menu_link">Clan</a>
<a id="drop_down_link3" class="main_menu_link">Irgendetwas</a>
</div>
</div>
<div id="drop_down_container">
<div id="drop_down_content1" class="drop_down_content"></div>
<div id="drop_down_content2" class="drop_down_content"></div>
<div id="drop_down_content3" class="drop_down_content"></div>
</div>
jQuery: jQuery的:
$("#drop_down_link1").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
$("#drop_down_content1").delay(350).slideUp();
});
The problem in my script is, when i leave drop_down_link1 or drop_down_content1 then the content 'slideUp' but when i hover from drop_down_link1 to drop_down_content1 then there shouldn't be the function. 我的脚本中的问题是,当我离开drop_down_link1或drop_down_content1然后内容'slideUp'但是当我从drop_down_link1悬停到drop_down_content1时,那么应该没有该函数。
So my question is: 所以我的问题是:
http://jsfiddle.net/PKvZ2/ http://jsfiddle.net/PKvZ2/
Try with this code. 尝试使用此代码。 I added :
我补充说:
$("#drop_down_link1,#drop_down_container").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1,#drop_down_container").mouseleave(function (){
$("#drop_down_content1").delay(350).stop().slideUp();
});
Or this 或这个
$("#drop_down_link1,#drop_down_container").hover(function (){
$("#drop_down_content1").stop().slideDown();
},function(){
$("#drop_down_content1").stop().slideUp();
});
Very simple! 很简单! Just handle both
#drop_down_link1
and #drop_down_content1
mouseenter events as follows 只需处理
#drop_down_link1
和#drop_down_content1
事件,如下所示
$("#drop_down_link1,#drop_down_content1").mouseenter(function (){
$("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
$("#drop_down_content1").delay(350).stop().slideUp();
});
2. 2。
$('#main_menu_container a.main_menu_link').each(function(index,item){
alert(index);
var $this=$(this),
$dropdownContent=$('#drop_down_container .drop_down_content')
[index];
......
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.