[英]Jquery Menu Hide show
<div class="tools">TOOLS
<ul>
<li class="toolone">First
<div class="plugin">
<select>Option
<optios></options
</select>
</div>
</li>
<ul>
</div>
Jquery : jQuery的:
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
});
Hide show works perfect, but when I click on Inner Select option within li even it closes. 隐藏显示效果完美,但是当我单击li中的“内部选择”选项时,它甚至关闭。 I tried event.stopPropagation(); 我尝试了event.stopPropagation();
Any help ? 有什么帮助吗?
Firstly there was error in your html. 首先,您的html中有错误。 Updated your html: 更新了您的html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="tools">TOOLS
<ul>
<li class="toolone">First
<div class="plugin">
<select>
<option>abc</option>
</select>
</div>
</li>
</ul>
</div>
</body>
</html>
Secondly, you must explicitly handle clicking of select to stop event propagation: 其次,您必须显式处理select的单击以停止事件传播:
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
$('.toolone select').click(function (e) {
e.stopPropagation();
});
});
Try this one: 试试这个:
$(document).ready(function () {
$('.toolone').click(function (e) {
if(e.target !== this) {
return;
}
$(this).find('.plugin').toggle(200);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.