我创建了一个下拉 list ，当选中最后一个选项时，它会打开一个文本区域。 当我点击下拉菜单外部时，我需要能够关闭下拉菜单。 我正在使用此代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="author" content="">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="row inner-container">
<div class="group">
<div class="styled-select control-group">
<div class="controls">
<div id="list2" class="dropdown-check-list" tabindex="100">
<span class="anchor">-- Selecteer uw reparatie --</span>
<ul class="items">
<li class="item first-item">
<input id="dropdown-check-list-01" type="checkbox" />
<label for="dropdown-check-list-01"><span></span>option 1</label>
</li>
<li class="item">
<input id="dropdown-check-list-02" type="checkbox" />
<label for="dropdown-check-list-02"><span></span>option 2</label>
</li>
<li class="item overige">
<input id="dropdown-check-list-07" type="checkbox" name="messagetick" />
<label for="dropdown-check-list-07"><span></span>Other</label>
<div class="contactmessage">
<textarea name="setmessage" cols="25" rows="5"></textarea>
</div>
<script type="text/javascript">
$('input[name="messagetick"]').click(function() {
$('.contactmessage').toggle(this.checked);
});
$('input[name="messagetick"]').change(function(){
if($(this).is(":checked")) {
$('li.overige').addClass("checked");
} else {
$('li.overige').removeClass("checked");
}
});
</script>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function ($) {
var checkList = $('.dropdown-check-list');
checkList.on('click', 'span.anchor', function(event){
var element = $(this).parent();
if ( element.hasClass('visible'))
{
element.removeClass('visible');
}
else
{
element.addClass('visible');
}
checkList.on("blur", function() {
if ($("textarea[name='setmessage']").not(':focus')) {
element.removeClass('visible');
}
});
});
});
</script>
</div>
</div>
<style>
.dropdown-check-list {
border-radius: 2px;
display: inline-block;
padding-left: 0;
}
.dropdown-check-list .anchor {
cursor: pointer;
display: inline-block;
height: 47px;
line-height: 48px;
padding: 0 40px 0 20px;
position: relative;
width: 468px;
}
.dropdown-check-list ul.items {
border-top: 1px solid #dedede;
display: none;
margin: 0;
padding: 0;
}
.dropdown-check-list ul.items li {
height: 36x;
list-style: none;
}
.dropdown-check-list ul.items li.item:hover {
background: #005a84;
}
.dropdown-check-list ul.items li.item:hover label,
.dropdown-check-list ul.items li.item:hover .icon-info-sign {
color: #fff;
}
.dropdown-check-list ul.items li.item:first-of-type {
margin-top: 10px;
}
.dropdown-check-list ul.items .totaalprijs {
font-weight: bold;
padding: 20px;
}
.dropdown-check-list.visible .items {
display: block;
}
.dropdown-check-list input, .dropdown-check-list label {
display: inline-block;
line-height: 36px;
margin: 0;
width: auto;
}
.dropdown-check-list input[type=checkbox] {
display: none;
margin: 0 20px;
}
.dropdown-check-list label {
color: #999;
}
.dropdown-check-list input[type="checkbox"] + label span {
background: url(../img/check_sheet.png) left -36px no-repeat;
cursor: pointer;
display: inline-block;
height: 20px;
margin: 0 20px;
vertical-align: middle;
width: 20px;
}
.dropdown-check-list input[type="checkbox"]:checked + label span {
background: url(../img/check_sheet.png) left top no-repeat;
}
.dropdown-check-list .icon-info-sign {
color: #999;
line-height: 36px;
}
.dropdown-check-list .other textarea {
display: block;
font-size: 14px;
margin: 25px auto 0;
padding: 5px;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: -o-calc(100% - 40px);
width: calc(100% - 40px);
}
.dropdown-check-list .checked {
background-color: #acacac !important;
padding-bottom: 30px;
}
.dropdown-check-list .checked label,
.dropdown-check-list .checked i {
color: #fff;
}
.dropdown-check-list .contactmessage {
display: none;
}
</style>
</body>
</html>
这部分脚本是我在外部单击时用来关闭下拉列表的部分。
checkList.on( "blur", function(){
element.removeClass('visible');
});
我遇到的问题是，当我尝试写入文本区域时，它也会关闭下拉列表。如何进行设置，以便在选择文本区域时不会关闭下拉列表？
最佳答案
我的一个 friend 帮我解决了这个问题，所以我将其发布在这里，供遇到同样问题的人使用。
$(document).mouseup(function (e) {
var container = $('.dropdown-check-list');
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.removeClass('visible');
}
});
关于javascript - 如何在单击下拉列表外部时关闭下拉列表，但在选择文本区域时阻止其关闭？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33348851/