需要在输入文本字段下方显示下拉菜单。目前的配置是,如果文本输入字段失去焦点,隐藏此下拉菜单。问题是,用户需要能够点击下拉菜单本身来显示另一个区域,但在这样做时,下拉菜单本身会在其他区域显示之前隐藏。注释掉Fiddle的15-17行代码以查看其他区域的正确显示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic show/hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$(".addressFill").hide();
$(".dropdown").hide();
function showElem() {
$(".addressFill").show();
}
$(".addresspicker").click(function () {
$("ul.dropdown").toggle();
});
// Problem starts here
$(".addresspicker").focusout(function () {
$(".dropdown").hide();
});
// ends
$("ul.dropdown").on("click", "li", showElem);
});
</script>
<style>
.dropdown { margin-left: 0.5em; padding: 0.5em; background: #fff; position: absolute; z-index: 999; border-top: 1px solid #B9B9B9; border-left: 1px solid #B9B9B9; border-right: 1px solid #7D7D7D; border-bottom: 1px solid #7D7D7D; }
ul { list-style-type: none; }
.dropdown li { padding: 0.5em; }
.dropdown li:hover { background-color: #eee; }
.dropdown li a:hover { text-decoration: none; }
p.addressFill { float: right; }
</style>
</head>
<body>
<form>
<fieldset>
<div class="section">
<label class="FieldLabel">Address:<span class="required">*</span></label>
<div class="autofill">
<input name="" maxlength="38" size="38" id="" type="text" title="addresspicker" class="addresspicker" />
<ul class="dropdown">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</div>
<p class="addressFill"> Show/hide section </p>
</fieldset>
</form>
</body>
</html>
.stopPropagation();
时,任何绑定到.addresspicker
或.dropdown
父级的点击事件将不再触发,当这些元素被点击时。尽管在这种特定情况下,我怀疑这不会引起任何问题,除非在某个阶段为div.autofill
、div.section
或form
分配了点击事件。 - Nope