时间戳

首页 > 解决方案 > 如何在 HTML 中使用复选框添加多个下拉列表？

javascript - 如何在 HTML 中使用复选框添加多个下拉列表？

问题描述

我的 HTML 代码是：

 <div id="list1" class="dropdown-check-list" tabindex="100">
      <span class="anchor">Select Months</span>
      <ul class="items">
        <li><input type="checkbox" />Apr </li>
        <li><input type="checkbox" />May</li>
        <li><input type="checkbox" />June </li>
        <li><input type="checkbox" />July </li>
        <li><input type="checkbox" />Aug </li>
        <li><input type="checkbox" />Sep </li>
        <li><input type="checkbox" />Oct</li>
        <li><input type="checkbox" />Nov</li>
        <li><input type="checkbox" />Dec</li>
        <li><input type="checkbox" />Jan</li>
        <li><input type="checkbox" />Feb</li>
        <li><input type="checkbox" />Mar</li>
      </ul>
    </div>

    <div id="list2" class="dropdown-check-list" tabindex="100">
      <span class="anchor">Select Quarter</span>
      <ul class="items">
        <li><input type="checkbox" />Quarter 1</li>
        <li><input type="checkbox" />Quarter 2</li>
        <li><input type="checkbox" />Quarter 3</li>
        <li><input type="checkbox" />Quarter 4 </li>
      </ul>
    </div>

    <div id="list3" class="dropdown-check-list" tabindex="100">
      <span class="anchor">Select Monthly/Yearly</span>
      <ul class="items">
        <li><input type="checkbox" />6 Months </li>
        <li><input type="checkbox" />Year</li>
      
      </ul>
    </div>

我的 CSS 代码是：

.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;
}

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

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

我的 Javascript 代码是：

var checkList = document.getElementById('list1');
    checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
      if (checkList.classList.contains('visible'))
        checkList.classList.remove('visible');
      else
        checkList.classList.add('visible');
    }
  </script>

  <script>
    var checkList = document.getElementById('list2');
    checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
      if (checkList.classList.contains('visible'))
        checkList.classList.remove('visible');
      else
        checkList.classList.add('visible');
    }
  </script>

  <script>
    var checkList = document.getElementById('list3');
    checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
      if (checkList.classList.contains('visible'))
        checkList.classList.remove('visible');
      else
        checkList.classList.add('visible');
    }
</script>

我尝试运行此代码，但是通过单击第一个和第二个下拉菜单，只有第三个下拉菜单有效，第一个和第二个下拉菜单不起作用，这意味着通过单击第一个下拉菜单，第三个下拉菜单会展开，第二个下拉菜单也会发生同样的情况。如果有人可以请帮助我，谢谢。

标签： javascripthtmlcss

解决方案

发生这种情况是因为您对所有三个元素“list1”、“list2”和“list3”使用相同的变量“var checkList”。这样当执行阶段到达这一行时“var checkList = document.getElementById('list3');” 它不再引用“list1”和“list2”元素。您可以通过使用三个单独的变量来解决此问题。例如：

var checkList = document.getElementById('list1');
    checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
      if (checkList.classList.contains('visible'))
        checkList.classList.remove('visible');
      else
        checkList.classList.add('visible');
    }
  </script>

  <script>
    var checkList2 = document.getElementById('list2');
    checkList2.getElementsByClassName('anchor')[0].onclick = function(evt) {
      if (checkList.classList.contains('visible'))
        checkList.classList.remove('visible');
      else
        checkList.classList.add('visible');
    }
  </script>

  <script>
    var checkList3 = document.getElementById('list3');
    checkList3.getElementsByClassName('anchor')[0].onclick = function(evt) {
      if (checkList.classList.contains('visible'))
        checkList.classList.remove('visible');
      else
        checkList.classList.add('visible');
    }
</script>

推荐阅读