Question

我为一个下拉列表编写了Java脚本代码，该列表具有多个选择复选框。我想创建两个这样的下拉列表。我尝试了多种方法，但仅适用于一个下拉列表。下面是我的HTML，CSS和javascript代码。

var checkList = document.getElementById(1);
var items = document.getElementById('items');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (items.classList.contains('visible')) {
    items.classList.remove('visible');
    items.style.display = "none";
  } else {
    items.classList.add('visible');
    items.style.display = "block";
  }


}

items.onblur = function(evt) {
  items.classList.remove('visible');
}

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.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 {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

<body>
  <div id='1' value='1' class='dropdown-check-list' tabindex='100'>
    <span class='anchor'>Select Term(s)</span>
    <ul id='items' class='items'>
      <li><input type='checkbox' />Term 1 </li>
      <li><input type='checkbox' />Term 2 </li>
      <li><input type='checkbox' />Term 3 </li>
    </ul>
  </div>


  <div id='2' value='2' class='dropdown-check-list' tabindex='100'>
    <span class='anchor'>Select Term(s)</span>
    <ul id='items' class='items'>
      <li><input type='checkbox' />Term 1 </li>
      <li><input type='checkbox' />Term 2 </li>
      <li><input type='checkbox' />Term 3 </li>
    </ul>
  </div>
</body>

This appears as follows. Only the first dropdown works

Answer 1

function dropdownClick(n){
  
  var checkList = document.getElementById(n);
  var items = document.getElementById('items'+n);
  if (items.classList.contains('visible')) {
    items.classList.remove('visible');
    items.style.display = "none";
  } else {
    items.classList.add('visible');
    items.style.display = "block";
  }
}

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.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 {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

<body>
  <div id='1' value='1' class='dropdown-check-list' tabindex='100'>
    <span class='anchor' onclick="dropdownClick(1);">Select Term(s)</span>
    <ul id='items1' class='items'>
      <li><input type='checkbox' />Term 1 </li>
      <li><input type='checkbox' />Term 2 </li>
      <li><input type='checkbox' />Term 3 </li>
    </ul>
  </div>


  <div id='2' value='2' class='dropdown-check-list' tabindex='100'>
    <span class='anchor' onclick="dropdownClick(2);">Select Term(s)</span>
    <ul id='items2' class='items'>
      <li><input type='checkbox' />Term 1 </li>
      <li><input type='checkbox' />Term 2 </li>
      <li><input type='checkbox' />Term 3 </li>
    </ul>
  </div>
</body>

Answer 2

您有2个下拉菜单，但您仅通过其ID选择了一个下拉菜单：

var checkList = document.getElementById(1);

编辑您的第二个下拉列表：在脚本标记的末尾添加以下内容：

var checkList2 = document.getElementById(2);
var items2 = document.getElementById('items2');
checkList2.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (items2.classList.contains('visible')) {
    items2.classList.remove('visible');
    items2.style.display = "none";
  } else {
    items2.classList.add('visible');
    items2.style.display = "block";
  }
}

items2.onblur = function(evt) {
  items2.classList.remove('visible');
}

<div id='2' value='2' class='dropdown-check-list' tabindex='100'>
  <span class='anchor'>Select Term(s)</span>
  <ul id='items2' class='items2'>
    <li><input type='checkbox' />Term 1 </li>
    <li><input type='checkbox' />Term 2 </li>
    <li><input type='checkbox' />Term 3 </li>
  </ul>
</div>

但是拥有这样的重复代码不是一个好主意。

在javascript

2 个答案: