Question

对于我正在实现的交互设计技巧，我对jquery有一点问题。我有一个链接和一个隐藏的下拉菜单，用于显示用户点击链接的时间。如果用户点击链接或菜单，我希望隐藏下拉菜单。这两个元素都位于使用AJAX动态加载的页面部分（因此使用了live（）函数）。如果我在非AJAX重新加载的容器上执行它，一切正常，但是一旦它是动态加载的内容就不能正常工作（下拉菜单显示，但如果我点击外部则不会隐藏）。我的代码如下：

$("#clickToOpen").live('click',function(event) {
    $("#dropdownMenu").show();
    event.stopPropagation();
});

$("#dropdownMenu").live('click',function(event){
    event.stopPropagation();
});

$(document).live('click',function() {
    $("#dropdownMenu").hide(); 
});

（我也尝试使用click（）函数直接处理（document）上的最后一个事件，因为这个元素没有重新加载，但不起作用）

有什么想法吗？

Answer 1

我觉得你可以创建一个像

这样的课程

.hide {
display:none;
}

并使用像这样的toggleClass ......

$("#clickToOpen").live('click',function(event) {
$('#dropdownMenu').toggleClass("hide");
})

不是经过测试的代码......

这是你的最终代码......

    <!DOCTYPE html>
<html>
<head>
 <style>
.hide {
display:none;
}

.show {
display:visible;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<a href='' id='clickToOpen'>click me</a>

<div id='dropdownMenu' class='hide'>dropdownMenu</div>

<script>
$("#clickToOpen").live('click',function(event) {
$('#dropdownMenu').toggleClass("hide");
event.preventDefault();
})
</script>

</body>
</html>

Answer 2

如果我错了，有人应该纠正我。

但是我对.live调用event.stopPropagation()的理解根本没有任何影响，因为对于实际工作而言，它附加到窗口或文档对象，因此，它已经传播到它已经可以了。

关于隐藏菜单，

我相信您应该考虑添加透明叠加层，与模态对话框使用的内容相同。

然后您绑定到叠加层以隐藏菜单。

jquery live（）函数和加载AJAX的内容出现问题

2 个答案: