Question

我创建了一个示例复选框下拉菜单，在单击下拉菜单外部时隐藏下拉菜单时遇到一个问题。下面是代码

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
$('#checkboxes').click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  $('#checkboxes').style.display = "none";
});

.category {
  width: 250px;
}

#checkboxes {
  width: 250px;
  display: none;
  border: 1px #aaa solid;
  overflow-y: scroll;
  background-color: white;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="category" onclick="showCheckboxes()">
  <option value="">Select cities
  </option>
</select>
<div id="checkboxes">
  <label> 
    <input type="checkbox" /> Bangalore
  </label>
  <label>  
    <input type="checkbox"  /> Hyderabad
  </label>
  <label>  
    <input type="checkbox" /> Delhi
  </label>
  <label>  
    <input type="checkbox" /> Mumbai
  </label>
  <label>  
    <input type="checkbox" /> Chennai
  </label>
  <label>  
    <input type="checkbox"  /> Panaji
  </label>
</div>

我希望通过在任意位置外部单击来关闭下拉菜单。请帮我解决这个问题，我尝试使用脚本使显示样式无效，但无法正常工作

Answer 1

style 是 HTMLElement 的属性，在jQuery上不可用。您应该在jQuery对象上使用.css()：

更改

$('#checkboxes').style.display = "none";

收件人

$('#checkboxes').css("display","none");

尽管我更喜欢使用show()/hide()而不是设置style属性。您可以检查event.target.nodeName至show()/hide()元素。

尝试以下方式：

function showCheckboxes() {
  if ($('#checkboxes').is(':visible')) {
    $('#checkboxes').hide();
  }
  else {
    $('#checkboxes').show();
  }
}

                      
$(document).click(function(e) {
  if(e.target.nodeName == 'BODY')
    $('#checkboxes').hide();
});

.category {
  width: 250px;
}
#checkboxes {
  width: 250px;
  display: none;
  border: 1px #aaa solid;
  overflow-y: scroll;
  background-color: white;
}
#checkboxes label {
  display: block;
}
#checkboxes label:hover {
  background-color: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="category" onclick="showCheckboxes()">
  <option value="">Select cities
  </option>
</select>
<div id="checkboxes">
  <label > 
    <input type="checkbox" /> Bangalore
  </label>
  <label>  
    <input type="checkbox"  /> Hyderabad
  </label>
  <label>  
    <input type="checkbox" /> Delhi
  </label>
  <label>  
    <input type="checkbox" /> Mumbai
  </label>
  <label>  
    <input type="checkbox" /> Chennai
  </label>
  <label>  
    <input type="checkbox"  /> Panaji
  </label>
</div>

Answer 2

或者，您也可以尝试使用jQuery插件通过复选框选择Select DropDownList，如MultiSelect DropDownList With CheckBoxes In ASP.Net With C# And VB.NET Using jQuery Plugin

如何通过在下拉列表外部单击来隐藏复选框下拉列表

2 个答案: