javascript - 单击另一个下拉菜单后如何关闭一个下拉菜单

Question

function getElements(list) {
  var checkList = document.getElementById(list);
  var items = document.getElementById(list + '_items');

  if (items.classList.contains('visible')) {
    items.classList.remove('visible');
    items.style.display = "none";
  } else {
    items.classList.add('visible');
    items.style.display = "block";
  }

};

$('html').click(function() {
  $('#list1_items').hide();
});

$('#list1').click(function(event) {
  event.stopPropagation();
});
$('html').click(function() {
  $('#list2_items').hide();
});

$('#list2').click(function(event) {
  event.stopPropagation();
});

.dropdown-check-list {
  display: inline-block;
  padding: 5px;
  height: 50px;
  overflow-y: auto;
  z-index: 999;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
  min-width: 100%;
  z-index: 999;
  box-sizing: border-box;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  position: absolute;
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 999;
  background: white;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list1" class="dropdown-check-list" tabindex="1">

  <span class="anchor" onclick="getElements(&#39;list1&#39;)">Select Months</span>

  <ul id="list1_items" class="items" name="month">


    <li><input type="checkbox" name="month" value="Apr-2021" id="apr"><label for="apr">April</label> </li>
    <li><input type="checkbox" name="month" value="May-2021" id="may"><label for="may">May</label> </li>
    <li><input type="checkbox" name="month" value="Jun-2021" id="jun"><label for="jun">June</label> </li>
    <li><input type="checkbox" name="month" value="Jul-2021" id="jul"><label for="jul">July</label></li>
    <li><input type="checkbox" name="month" value="Aug-2021" id="aug"><label for="aug">August</label></li>
    <li><input type="checkbox" name="month" value="Sep-2021" id="sep"><label for="sep">September</label></li>
    <li><input type="checkbox" name="month" value="Oct-2021" id="oct"><label for="oct">October</label></li>
    <li><input type="checkbox" name="month" value="Nov-2021" id="nov"><label for="nov">November</label></li>
    <li><input type="checkbox" name="month" value="Dec-2021" id="dec"><label for="dec">December</label></li>
    <li><input type="checkbox" name="month" value="Jan-2021" id="jan"><label for="jan">January</label> </li>
    <li><input type="checkbox" name="month" value="Feb-2021" id="feb"><label for="feb">February</label></li>
    <li><input type="checkbox" name="month" value="Mar-2021" id="mar"><label for="mar">March</label> </li>

  </ul>

</div>




<div id="list2" class="dropdown-check-list" tabindex="100">
  <span class="anchor" onclick="getElements(&#39;list2&#39;)">Select Quarter</span>
  <ul id="list2_items" class="items" name="quarter">
    <li><input type="checkbox" name="quarter" value="Quarter1">Apr - Jun (Quarter 1)</li>
    <li><input type="checkbox" name="quarter" value="Quarter2">Jul - Sep (Quarter 2)</li>
    <li><input type="checkbox" name="quarter" value="Quarter3">Oct - Dec (Quarter 3)</li>
    <li><input type="checkbox" name="quarter" value="Quarter4">Jan - Mar (Quarter 4)</li>
  </ul>
</div>

我的html是：

<div id="list1" class="dropdown-check-list" tabindex="1">
      
      <span class="anchor" onclick="getElements(&#39;list1&#39;)">Select Months</span>

      <ul id="list1_items" class="items" name="month">
        

        <li><input type="checkbox" name="month" value="Apr-2021" id="apr"><label for="apr">April</label> </li>
        <li><input type="checkbox" name="month" value="May-2021" id="may"><label for="may">May</label> </li>
        <li><input type="checkbox" name="month" value="Jun-2021" id="jun"><label for="jun">June</label> </li>
        <li><input type="checkbox" name="month" value="Jul-2021" id="jul"><label for="jul">July</label></li>
        <li><input type="checkbox" name="month" value="Aug-2021" id="aug"><label for="aug">August</label></li>
        <li><input type="checkbox" name="month" value="Sep-2021" id="sep"><label for="sep">September</label></li>
        <li><input type="checkbox" name="month" value="Oct-2021" id="oct"><label for="oct">October</label></li>
        <li><input type="checkbox" name="month" value="Nov-2021" id="nov"><label for="nov">November</label></li>
        <li><input type="checkbox" name="month" value="Dec-2021" id="dec"><label for="dec">December</label></li>
        <li><input type="checkbox" name="month" value="Jan-2021" id="jan"><label for="jan">January</label> </li>
        <li><input type="checkbox" name="month" value="Feb-2021" id="feb"><label for="feb">February</label></li>
        <li><input type="checkbox" name="month" value="Mar-2021" id="mar"><label for="mar">March</label> </li>
        
      </ul>
      
    </div>

  


    <div id="list2" class="dropdown-check-list" tabindex="100">
      <span class="anchor" onclick="getElements(&#39;list2&#39;)">Select Quarter</span>
      <ul id="list2_items" class="items" name="quarter">
        <li><input type="checkbox" name="quarter" value="Quarter1">Apr - Jun (Quarter 1)</li>
        <li><input type="checkbox" name="quarter" value="Quarter2">Jul - Sep (Quarter 2)</li>
        <li><input type="checkbox" name="quarter" value="Quarter3">Oct - Dec (Quarter 3)</li>
        <li><input type="checkbox" name="quarter" value="Quarter4">Jan - Mar (Quarter 4)</li>
      </ul>
    </div>

我的 CSS 是：

.dropdown-check-list {
  display: inline-block;
  padding: 5px;
  height: 50px;
  overflow-y: auto;
  z-index: 999; 
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
  min-width: 100%;
  z-index: 999; 
  box-sizing: border-box;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  position: absolute;
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 999;
  background: white;
}




.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: inline-block;
}

我的 JS 是：

<script>
function getElements(list) {
    var checkList = document.getElementById(list);
    var items = document.getElementById(list + '_items');

    if (items.classList.contains('visible')) {
        items.classList.remove('visible');
        items.style.display = "none";
    } else {
        items.classList.add('visible');
        items.style.display = "block";
    }

};
    
</script>



<script>
  $('html').click(function() {
     $('#list1_items').hide();
      });

      $('#list1').click(function(event){
           event.stopPropagation();
      });
  $('html').click(function() {
           $('#list2_items').hide();
        });

        $('#list2').click(function(event){
             event.stopPropagation();
        });
    </script>

但是根据this我的两个下拉菜单都打开了，但是我想在用户打开另一个下拉菜单时关闭，所以它应该以这样一种方式工作，即当用户完成第一个下拉菜单中的复选框并单击另一个下拉菜单时，第一个自动关闭。

请帮帮我。谢谢你。

标签： javascripthtmlcss

Answer 1

对您的代码进行最小的更改，我只是在单击时隐藏另一个列表。

function getElements(list) {
  var checkList = document.getElementById(list);
  var items = document.getElementById(list + '_items');

  if (items.classList.contains('visible')) {
    items.classList.remove('visible');
    items.style.display = "none";
  } else {
    items.classList.add('visible');
    items.style.display = "block";
  }

};

$('html').click(function() {
  $('#list1_items').hide();
});

$('#list1').click(function(event) {
  event.stopPropagation();
  $('#list2_items').hide();
});
$('html').click(function() {
  $('#list2_items').hide();
});

$('#list2').click(function(event) {
  event.stopPropagation();
  $('#list1_items').hide();
});

.dropdown-check-list {
  display: inline-block;
  padding: 5px;
  height: 50px;
  overflow-y: auto;
  z-index: 999;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
  min-width: 100%;
  z-index: 999;
  box-sizing: border-box;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  position: absolute;
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 999;
  background: white;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list1" class="dropdown-check-list" tabindex="1">

  <span class="anchor" onclick="getElements(&#39;list1&#39;)">Select Months</span>

  <ul id="list1_items" class="items" name="month">


    <li><input type="checkbox" name="month" value="Apr-2021" id="apr"><label for="apr">April</label> </li>
    <li><input type="checkbox" name="month" value="May-2021" id="may"><label for="may">May</label> </li>
    <li><input type="checkbox" name="month" value="Jun-2021" id="jun"><label for="jun">June</label> </li>
    <li><input type="checkbox" name="month" value="Jul-2021" id="jul"><label for="jul">July</label></li>
    <li><input type="checkbox" name="month" value="Aug-2021" id="aug"><label for="aug">August</label></li>
    <li><input type="checkbox" name="month" value="Sep-2021" id="sep"><label for="sep">September</label></li>
    <li><input type="checkbox" name="month" value="Oct-2021" id="oct"><label for="oct">October</label></li>
    <li><input type="checkbox" name="month" value="Nov-2021" id="nov"><label for="nov">November</label></li>
    <li><input type="checkbox" name="month" value="Dec-2021" id="dec"><label for="dec">December</label></li>
    <li><input type="checkbox" name="month" value="Jan-2021" id="jan"><label for="jan">January</label> </li>
    <li><input type="checkbox" name="month" value="Feb-2021" id="feb"><label for="feb">February</label></li>
    <li><input type="checkbox" name="month" value="Mar-2021" id="mar"><label for="mar">March</label> </li>

  </ul>

</div>




<div id="list2" class="dropdown-check-list" tabindex="100">
  <span class="anchor" onclick="getElements(&#39;list2&#39;)">Select Quarter</span>
  <ul id="list2_items" class="items" name="quarter">
    <li><input type="checkbox" name="quarter" value="Quarter1">Apr - Jun (Quarter 1)</li>
    <li><input type="checkbox" name="quarter" value="Quarter2">Jul - Sep (Quarter 2)</li>
    <li><input type="checkbox" name="quarter" value="Quarter3">Oct - Dec (Quarter 3)</li>
    <li><input type="checkbox" name="quarter" value="Quarter4">Jan - Mar (Quarter 4)</li>
  </ul>
</div>