如何使菜单关闭,如果它被点击了
我有一些值的菜单,我有点隐藏,而点击更多的按钮时,它显示像谷歌更多的菜单...如果它被点击出来,它不隐藏直到更多的菜单中单击再次如何使菜单关闭,如果它被点击了
<a href="javascript:;" onClick="toggle('one');">More<small>▼</small></a><div class="more list" id="one" style="display:none"><a href="#">test</a> <span style="color:#329">|</span> <a href="#">test1</a> <span style="color:#169">|</span> <a href="#">test4</a></div></div>
脚本:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
如何使其接近,而在任何其他地方的mosuse点击次数超过菜单之外
我看你使用jQuery标记这一点,如果这是一个选项,你可以清理链接了一下,像这样:
<a href="#" class="more_link">More<small>▼</small></a>
而且使用不显眼的脚本事件冒泡到合并你的优势,如:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});
});
You can test it out here,这只是关闭菜单,如果你没有点击切换的菜单,如点击其中一个测试链接将不是关闭它。如果你想要它,只需删除$(".more").click(function(e) { e.stopPropagation(); });
部分。
它使用event.stopPropagation()
停止从bubbling up的点击document
,这要是发生(并会如果你点击任何其他)触发其click
处理程序,关闭所有.more
元素。
我不会使用onBlur,因为它不是一个好的可访问性方法(例如,如果用户使用tab来导航页面)。
看看这个解决方案,而不是: jQuery click event for document but ignore a div
通常情况下,我让事件冒泡的“身体”或“HTML” doc和检查目标就是我想要(和/或不包含在我想要的内容中)。如果事件目标未包含在菜单中,请执行所需的操作(在这种情况下,请隐藏div)。
即
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
注:您的标记将需要进行扩展,使得 “更多的” href成为具有类属性的class = “menu_toggle”
OMG,你有两个注册名称和问相同的问题2次? http://*.com/questions/3177582/how-to-hide-div-by-onclick-using-javascript/3179061#3179061 – galambalazs 2010-07-05 12:32:14