在输入文本字段的下面出现一个下拉框。当前配置为在文本输入字段失焦时隐藏此下拉框。问题是,用户需要能够单击下拉框本身来显示另一个区域,但在这样做时,下拉框本身隐藏在其他区域显示之前。修改第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>
我相信有一个更好的方法,但你可以尝试使用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 - Using setTimeout()
这只是使用setTimeout()
的众多变体之一。你可以非常详细地改善用户体验。
当然,也可能有更有效的方法来同时完成这一切。
您可以使用。stoppropagation ();
jsfiddle -基本上点击文档将隐藏下拉菜单,除非你点击.addresspicker
或.dropdown
。
// Removed the focusout and added these...
$(".addresspicker, .dropdown").click(function ( e ) {
e.stopPropagation();
});
$(document).click(function( e ){
$("ul.dropdown").hide();
});