从输入文本字段下方显示下拉列表。当前配置为在文本输入字段失焦时隐藏此下拉列表。问题是,用户需要能够单击下拉列表本身以显示另一个区域,但是在执行此操作时,下拉列表本身会隐藏在其他区域显示之前。注释掉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>
答案 0 :(得分:2)
我确信有更好的方法,但你可以尝试利用setTimeout()延迟自动关闭菜单,当用户完成它和/或在给定时间过后,类似于这样:
// stores the setTimeout result
var timeOut;
// closes the menu
var closeMenu = function () {
$("ul.dropdown").hide();
};
// resets the timeout using the specified delay
var resetTimeout = function(newDelay){
if (timeOut > 0) {
clearTimeout(timeOut);
}
timeOut = setTimeout(function () {
closeMenu()
}, newDelay);
};
$(function () {
// use to store timeout
var timeOut = null;
// ...removed unchanged code for readability
// Problem starts here
// reset timeout when focus is lost on input
$(".addresspicker").focusout(function () {
resetTimeout(1000);
});
// reset the timeout when moving over or leaving the menu
$("ul.dropdown").on('mousemove mouseleave', function () {
resetTimeout(1000);
})
// ends
// ...removed unchanged code for readability
});
DEMO - 使用setTimeout()
这只是使用setTimeout()
的众多变体之一。您可以非常精细地改善用户体验
可能有一种更有效的方法可以在一起完成所有这些。
答案 1 :(得分:1)
您可以使用.stopPropagation();
jsfiddle - 除非您点击.addresspicker
或.dropdown
,否则基本上点击文档会隐藏下拉列表。
// Removed the focusout and added these...
$(".addresspicker, .dropdown").click(function ( e ) {
e.stopPropagation();
});
$(document).click(function( e ){
$("ul.dropdown").hide();
});