我创建了一个多选下拉列表，当您单击 div 时会打开该列表。然后，当您在下拉列表中单击时，需要将其打开才能选择多个内容。然后，当您单击下拉列表外部时，它应该关闭。
根据日志，我得到了可以按预期工作的代码:
$(document).mouseup(function(e){
if(!e.target.parentNode.id.includes('multipleSelectDropdown')){
$('*[id*=multipleSelectDropdown]').css('display', 'none');
console.log("Outside!");
}
else{
console.log("Inside!");
}
});
function clickedMultiSelectDropdown(optionsWrapperInput){
var optionsWrapper = document.getElementById(optionsWrapperInput);
if(optionsWrapper.style.display == 'none'){
optionsWrapper.style.display = 'block';
}
else{
optionsWrapper.style.display = 'none';
}
}.multiple-select-wrapper{
width: 1000px;
height: 1000px;
}
.multiple-select{
cursor: pointer;
}
.multiple-select-options-wrapper {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.own-input-field{
border: 1px solid rgb(180 180 180);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="multiple-select-wrapper">
<div class="multiple-select">
<div class="own-input-field" tabindex="0" onclick="clickedMultiSelectDropdown('multipleSelectDropdownSize')">Size...</div>
<div id="multipleSelectDropdownSize" class="multiple-select-options-wrapper" style="display: none;">
<div class="multiple-select-options-item">1</div>
<div class="multiple-select-options-item">2</div>
</div>
</div>
</div>
</body>如果我单击“大小...”元素，则会打开带有选项的框。当我单击该框时，它会记录在“内部”并保持打开状态。当我单击所有元素的下方或外部时，它会显示“外部”，并且该框会关闭。
问题
由于某种原因，当我在盒子打开时再次单击“大小...”div 时，它会再次按预期记录“外部”，但盒子不会关闭。为什么？这让我发疯...
最佳答案
你的代码很困惑。使用 2 个处理程序会产生竞争条件，其中 mouseup 获胜(如 @Pointy 指出)。
这是一个使用 event delegation 的普通 js 解决方案，仅处理 click 事件并使用 classList.toggle 处理值的显示/隐藏。
您可以将其转换为 jquery(如果 deemed necessary )。
document.addEventListener(`click`, handle);
function handle(evt) {
if (!evt.target.closest(`#multipleSelectDropdownSize`)) {
return document.querySelector(`#multipleSelectDropdownSize`)
.classList.toggle(`visible`);
}
if (evt.target.classList
.contains(`multiple-select-options-item`)) {
return evt.target.classList.toggle(`selected`);
}
}.multiple-select-wrapper {
width: 100px;
height: 100px;
}
.multiple-select {
cursor: pointer;
}
.multiple-select-options-wrapper {
display: block;
}
#multipleSelectDropdownSize {
display: none;
}
.visible {
display: block !important;
}
.selected {
background-color: blue;
color: white;
}
.multiple-select-options-wrapper {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.own-input-field {
border: 1px solid rgb(180 180 180);
}<div class="multiple-select-wrapper">
<div class="multiple-select">
<div class="own-input-field" tabindex="0">Size...</div>
<div id="multipleSelectDropdownSize" class="multiple-select-options-wrapper">
<div class="multiple-select-options-item">1</div>
<div class="multiple-select-options-item">2</div>
</div>
</div>
</div>关于javascript - jQuery 在单击元素外部时隐藏元素按预期工作，但实际上并非如此，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75512010/