点击外部的关闭元素-我在这里做错了什么？
[英]Closing element on click outside - What am I doing wrong here?
问题描述
Just doing a quick test on clicking outside an element with jquery, but having some problems. 
只是对使用jquery在元素外部单击进行了快速测试，但是存在一些问题。
I'm trying to remove a class on click outside of an element. 我正在尝试在元素外部单击上删除类。
The problem appears to be that the 'document' handler is activating at the same time as the span and therefore not working. 问题似乎是“文档”处理程序正在与跨度同时激活，因此无法正常工作。
I need it so it works after the class has already been added. 我需要它，这样在添加班级后它就可以工作。
Cheers 干杯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <link rel="stylesheet" href="css/normalize.css" media="screen" title="no title"> <link rel="stylesheet" href="css/main.css" media="screen" title="no title"> </head> <body> <ul> <li class="top-list"><span>Item</span> <ul class="sub-top"> <li class="sub-list">Item 1</li> <li class="sub-list">Item 2</li> <li class="sub-list">Item 3</li> <li class="sub-list">Item 4</li> </ul> </li> </ul> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script type="text/javascript"> $("span").on("click", function(){ $(".sub-list").toggleClass("show-menu"); }); $(document).on('click', function(event) { if (!$(event.target).closest('.sub-list').length) { $(".sub-list").removeClass("show-menu"); } }); </script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2016-09-04 13:26:02
You miss ev.stopPropagation() for first handler. 您会错过第一个处理程序ev.stopPropagation() 。 You click on span toggle class show-menu , then event bubble into document and thus you click out of .sub-list ( span is out of it ) second handler remove class 您单击span切换类show-menu ，然后将事件气泡插入文档，因此单击.sub-list （范围已超出它）第二个处理程序删除类
Or in second handler you need to check that you click on element out of .sub-list AND not on span element 或者在第二个处理程序中，您需要检查是否单击了.sub-list元素，而不是单击span元素
ul[class]:not(.show-menu) { display: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <link rel="stylesheet" href="css/normalize.css" media="screen" title="no title"> <link rel="stylesheet" href="css/main.css" media="screen" title="no title"> </head> <body> <ul> <li class="top-list"><span>Item</span> <ul class="sub-top"> <li class="sub-list">Item 1</li> <li class="sub-list">Item 2</li> <li class="sub-list">Item 3</li> <li class="sub-list">Item 4</li> </ul> </li> </ul> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script type="text/javascript"> $("span").on("click", function(ev){ $(".sub-top").toggleClass("show-menu"); ev.stopPropagation(); }); $(document).on('click', function(event) { if (!$(event.target).closest('.sub-list').length) { $(".sub-top").removeClass("show-menu"); } }); </script> </body> </html>
Information about bubbling can be found here http://javascript.info/tutorial/bubbling-and-capturing 有关冒泡的信息，请参见http://javascript.info/tutorial/bubbling-and-capturing
解决方案2
0 2016-09-04 13:31:00
我认为这是一个气泡问题，请取消带有span元素的Bubble。尝试一下！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.