Question

在下面的代码中，一切都运行正常，只是在下拉列表打开后第二次点击按钮后，颜色不会从红色变为蓝色。有什么解决方案吗？

谢谢，
CP

    function dropdown_one() {
      document.getElementById("menu_list").classList.toggle("dcontent");
    }

    window.onclick = function(event) {
      if (!event.target.matches('.button')) {

        var menu = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < menu.length; i++) {
          var open_list = menu[i];
          if (open_list.classList.contains('dcontent')) {
            open_list.classList.remove('dcontent');
          }
        }
      }
    }

.button {
  background-color: blue;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.button:hover {
  background-color: green;
}
.button:focus {
  background-color: red;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: relative;
  background-color: #efefef;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  right: 0;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: grey
}
.dcontent {
  display: block;
}

<div class="dropdown">
  <button onclick="dropdown_one()" class="button">Dropdown</button>
  <div id="menu_list" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

Answer 1

问题是您正在使用focus伪类将背景颜色设置为红色。单击具有焦点的元素不会从该元素中删除焦点。单击该元素时，您可能会blur该元素，但您必须有办法确定该点击是激活按钮还是取消激活该按钮。

更简单的解决方案是使用普通类而不是尝试以这种方式利用focus伪类。由于您已经有一个JS click事件处理程序，您只需将代码放在那里以切换按钮上的类，指定是否已单击，然后使用该类设置红色背景。您还需要从窗口单击处理程序中的按钮中删除该类，因为只需删除焦点将不再恢复按钮的背景颜色。您可能想看看我是如何做到的，以获得有关如何改进窗口点击处理程序中已有代码的一些提示。

    function dropdown_one(btn) {
      document.getElementById("menu_list").classList.toggle("dcontent");
      btn.classList.toggle("button-selected");
    }

    window.onclick = function(event) {
      if (!event.target.matches('.button')) {

        var menu = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < menu.length; i++) {
          var open_list = menu[i];
          if (open_list.classList.contains('dcontent')) {
            open_list.classList.remove('dcontent');
          }
        }

        let selected = document.getElementsByClassName("button-selected");
        for (let i = 0, len = selected.length; i < len; i++) {
          selected[i].classList.remove("button-selected");
        }
      }
    }

.button {
  background-color: blue;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.button:hover {
  background-color: green;
}
.button-selected,
.button-selected:hover {
  background-color: red;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: relative;
  background-color: #efefef;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  right: 0;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: grey
}
.dcontent {
  display: block;
}

<div class="dropdown">
  <button onclick="dropdown_one(this)" class="button">Dropdown</button>
  <div id="menu_list" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

Answer 2

＆＃13;

.button {
  background-color: blue;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  font-family: sans-serif;
}
.button:hover {
  background-color: green;
}
.button:focus {
  background-color: red;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: relative;
  background-color: #efefef;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  right: 0;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: grey
}
.dcontent {
  display: block;
}
#butt {
  display: none;
}
label {
  display: inline-block;
}
#butt:checked ~ label .button {
  background-color: red;
}
#butt:checked ~ .dropdown-content {
  display: block;
}

＆＃13;

<div class="dropdown">
  <input type="checkbox" id="butt">
  <label for="butt">
    <div class="button">Dropdown</div>
  </label>
  <div id="menu_list" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

＆＃13;

Answer 3

function dropdown_one() {
    document.getElementById("menu_list").classList.toggle("dcontent");
    if ( document.getElementById("menu_list").offsetParent !== null ) {
      document.querySelector(".button").style.backgroundColor = "red";
    } else {
      document.querySelector(".button").style.backgroundColor = "";
    }
}

然后可以从CSS中删除它：

.button:focus {
    background-color: red;
}

以下是CodePen示例。

或更改HTML，以便使用纯CSS实现效果。

第二次单击下拉菜单后，CSS焦点不会改变颜色

3 个答案: