jquery下拉菜单
问题描述:
我有问题创建下拉菜单使用jQuery和CSS。这里是我的htmljquery下拉菜单
<nav class="topNav">
<ul>
<li>
<a href="#menu" class="menu-toggle"><img src="img/main.png" /></a>
</li>
<li>
<a href="#social" class="menu-toggle"><img src="img/social.png" /></a>
</li>
</ul>
</nav>
<div class='cssmenu' id="menu">
<ul>
<li class='active'>
<a href='index.html'><span>Home</span></a>
</li>
<li class='has-sub'>
<a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'>
<a href='#'><span>Product 1</span></a>
<ul>
<li>
<a href='#'><span>Sub Item</span></a>
</li>
<li class='last'>
<a href='#'><span>Sub Item</span></a>
</li>
</ul>
</li>
<li class='has-sub'>
<a href='#'><span>Product 2</span></a>
<ul>
<li>
<a href='#'><span>Sub Item</span></a>
</li>
<li class='last'>
<a href='#'><span>Sub Item</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'><span>About</span></a>
</li>
<li class='last'>
<a href='#'><span>Contact</span></a>
</li>
</ul>
</div>
<div class='cssmenu' id="social">
<ul>
<li>
<a href='http://www.facebook.com'><img src="img/facebook.png" /></a>
<a href='#'><img src="img/linked.png" /></a>
<a href='#'><img src="img/twitter.png" /></a>
</li>
</ul>
</div>
,这里是我的jQuery
$(document).ready(function(){
$(".cssmenu ul").hide();
var id;
$("a.menu-toggle").mouseenter(function(){
id=$(this).attr("href");
list=$($(this).attr("href")).children().first();
list.stop(true,false).slideDown("fast");
});
$("a.menu-toggle").mouseleave(function(){
list=$(id).children().first();
list.stop(true,false).slideUp("fast");
});
});
这里是我的导航栏
https://drive.google.com/file/d/0B0sCu8aj8zu2SnBuSl9BRmQ1SEE/edit?usp=sharing
那一刻我尝试移动到其向上滑动下拉的视频。如果我删除锚标签的mouseleave事件,那么我可以进入下拉菜单,但他们开始堆叠起来。
任何与此有关的帮助将非常感谢你。
答
尝试
$(document).ready(function(){
$('.cssmenu ul').hide();
$('a.menu-toggle').hover(function() {
var $target = $($(this).attr('href')).children('ul');
console.log($target.get())
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown(500);
}, function() {
var $target = $($(this).attr('href')).children('ul');
var timer = setTimeout(function() {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$('.cssmenu > ul').hover(function() {
clearTimeout($(this).data('hoverTimer'));
}, function() {
$(this).stop(true, true).slideUp();
});
});
演示:Fiddle
请给我CSS .... –
看到http://jsfiddle.net/arunpjohny/T8RE7/2/ –
谢谢@ArunPJohny该做的技巧 –