我有这个下拉菜单,只要我的用户点击链接,它就会滑动。但是,每当用户点击页面上的某个位置时(我当然不在菜单上),我不知道如何使其滑动。
我的CSS看起来像这样:
<li class="da-header-button message">
<span class="da-button-count">32</span>
<a href="#">Notifications</a>
<ul class="subnav">
<li class="head"><span class="bold">Notificatons</span></li>
<li class="item"><a href="#">Under menu</a></li>
<li class="item"><a href="#">Under menu</a></li>
</ul>
</li>
我当前的jQuery代码如下所示:
jQuery("ul.topnav li").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
jQuery(this).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
jQuery(this).hover(function() {
}, function(){
jQuery(this).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
});
如果我从上面编辑最后一个jQuery函数:jQuery(this).hover(function()
到这个:jQuery(this).click(function()
它不起作用,因为它只是slideDown然后再向上。
感谢您的帮助。
编辑:
谢谢你们!但是如果我同时打开其中两个子菜单呢?我该如何防止这种情况?
我只想让1开。
答案 0 :(得分:7)
当点击传播到文档时,向上滑动所有可见菜单:
$(document).on("click", function(){
$(".subnav:visible").slideUp();
});
然后通过停止事件传播来阻止在菜单中发生这种情况。
$("ul.topnav").on("click", "li", function(e){
e.stopPropagation();
$(".subnav:visible", $(this).siblings()).slideUp("fast");
$(".subnav", this).slideDown();
});
答案 1 :(得分:0)
这个JQuery应该可以工作:
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
答案 2 :(得分:0)
jQuery(this).find()会找到“this”的后代。在你的代码中,由于新的闭包“function()”,“this”发生了变化。
试试这个:
jQuery("ul.topnav li").click(function() { //When trigger is clicked...
var me = this;
//Following events are applied to the subnav itself (moving subnav up and down)
jQuery(me).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
jQuery(me).click(function() {
}, function(){
jQuery(me).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
});