jQuery菜单隐藏显示
[英]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的：
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
});
隐藏显示效果完美，但是当我单击li中的“内部选择”选项时，它甚至关闭。 我尝试了event.stopPropagation（）;
有什么帮助吗？
3 个解决方案
解决方案1
1 已采纳 2015-06-26 07:26:10
尝试这个：-
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
$('.toolone select').click(function(e){
e.stopPropagation();
})
});
解决方案2
0 2015-06-26 07:30:36
首先，您的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>
其次，您必须显式处理select的单击以停止事件传播：
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
$('.toolone select').click(function (e) {
e.stopPropagation();
});
});
见朋克
解决方案3
0 2015-06-26 07:39:57
试试这个：
$(document).ready(function () {
$('.toolone').click(function (e) {
if(e.target !== this) {
return;
}
$(this).find('.plugin').toggle(200);
});
});
显示/隐藏jQuery菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.