如何使菜单关闭，如果它被点击了

我有一些值的菜单，我有点隐藏，而点击更多的按钮时，它显示像谷歌更多的菜单...如果它被点击出来，它不隐藏直到更多的菜单中单击再次如何使菜单关闭，如果它被点击了

<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点击次数超过菜单之外

来源

2010-07-05 Arun

OMG，你有两个注册名称和问相同的问题2次？ http://stackoverflow.com/questions/3177582/how-to-hide-div-by-onclick-using-javascript/3179061#3179061 – galambalazs 2010-07-05 12:32:14

尝试使用在onblur event.

来源

2010-07-05 12:24:41

我看你使用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元素。

来源

2010-07-05 12:28:43

我不会使用onBlur，因为它不是一个好的可访问性方法（例如，如果用户使用tab来导航页面）。

看看这个解决方案，而不是： jQuery click event for document but ignore a div

来源

2010-07-05 12:31:19

通常情况下，我让事件冒泡的“身体”或“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”

来源

2010-07-05 17:01:04

如何使菜单关闭，如果它被点击了

回答

相关问题