如何隐藏div onclick在页面的任何地方使用jquery

Question

你好，我已经创建了一个多选，但需要隐藏该选项，点击页面上的任何地方如何在jquery中做这个动作。我正在用这个，但是它不工作。

你好，我已经创建了一个多选，但需要隐藏该选项腭点击页面上的任何地方如何在jquery中做这个动作。我正在用这个，但是它不工作。

$(document).click(function(){
$('.multiselectBox-option').hide();
});

$(document).on('click','.multiselectBox', function(){
$('.multiselectBox-option').toggle();
});

$(".multiselectItem").change(function(event){
if (this.checked){
var x = $(this).val();
$('.multiselectBox').append(x+','+'&n');
} else {
alert("You have elected to turn off checkout history.");
}
});

.multiselectBox{
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
background-color: #F8F9FB;
border: 1px solid #707070 !important;
height: 36px;
cursor: pointer;
}

.multiselectBox-option {
background: #f8f9fb;
padding: 5px;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border: 1px solid #707070 !important;
}

.multiselectBox-option ul{
list-style: none;
padding-left: 0px;

}

.arrow-down {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #022255;
float: right;
margin-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="multiselectBox mt-3">
<div class="arrow-down"></div>
</div>
<div class="multiselectBox-option" style="display: none;">
<ul>
<li><input type="checkbox" class="multiselectItem" value="Smoking Materials"/> <span>Smoking Materials</span></li>
<li><input type="checkbox" class="multiselectItem" value="Heating Equipment"/> <span>Heating Equipment</span></li>

</ul>
</div>
</div>

Answer 1

可以添加一个功能，当用户在外面点击多选时关闭它。如:

$(document).on('click','.multiselectBox', function(){
$('.multiselectBox-option').toggle();
});
$(".multiselectItem").change(function(event){
if (this.checked){
var x = $(this).val();
$('.multiselectBox').append(x+','+'&n');
} else {
alert("You have elected to turn off checkout history.");
}
});
//Close only if not click to multiselectbox
$(document).click(function(event) {
if (!$(event.target).closest(".multiselectBox").length && !$(event.target).closest(".multiselectBox-option").length ) {
$(".multiselectBox-option").hide();
}
});

.multiselectBox{
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
background-color: #F8F9FB;
border: 1px solid #707070 !important;
height: 36px;
cursor: pointer;
}

.multiselectBox-option {
background: #f8f9fb;
padding: 5px;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border: 1px solid #707070 !important;
}

.multiselectBox-option ul{
list-style: none;
padding-left: 0px;

}

.arrow-down {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #022255;
float: right;
margin-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="multiselectBox mt-3">
<div class="arrow-down"></div>
</div>
<div class="multiselectBox-option" style="display: none;">
<ul>
<li><input type="checkbox" class="multiselectItem" value="Smoking Materials"/> <span>Smoking Materials</span></li>
<li><input type="checkbox" class="multiselectItem" value="Heating Equipment"/> <span>Heating Equipment</span></li>

</ul>
</div>
</div>

Answer 2

为了达到这个目的，你可以在div上放置一个类来包装选择框和它的选项列表。

然后您可以将事件处理程序附加到隐藏所有选项列表的document，只要被单击的目标元素不是选择或选项列表。

试试这个:

let $doc = $(document);
$doc.on('click', '.multiselectBox', function() {
$('.multiselectBox-option').toggle();
});
$doc.on('click', e => {
let $target = $(e.target);
if (!$target.is('.multiselectBox-container') && !$target.closest('.multiselectBox-container').length) {
$('.multiselectBox-option').hide();
}    
}); 
$(".multiselectItem").change(function(event) {
if (this.checked) {
var x = $(this).val();
$('.multiselectBox').append(x + ',' + '&n');
} else {
alert("You have elected to turn off checkout history.");
}
});

.multiselectBox {
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
background-color: #F8F9FB;
border: 1px solid #707070 !important;
height: 36px;
cursor: pointer;
}
.multiselectBox-option {
background: #f8f9fb;
padding: 5px;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border: 1px solid #707070 !important;
}
.multiselectBox-option ul {
list-style: none;
padding-left: 0px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #022255;
float: right;
margin-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multiselectBox-container">
<div class="multiselectBox mt-3">
<div class="arrow-down"></div>
</div>
<div class="multiselectBox-option" style="display: none;">
<ul>
<li><input type="checkbox" class="multiselectItem" value="Smoking Materials" /> <span>Smoking Materials</span></li>
<li><input type="checkbox" class="multiselectItem" value="Heating Equipment" /> <span>Heating Equipment</span></li>
</ul>
</div>
</div>