第二次单击下拉菜单后，CSS焦点不会更改颜色 [英] CSS focus does not change color after second clicking on dropdown menu

问题描述

在下面的代码中，一切功能正常，除了在下拉菜单打开后第二次单击按钮之后，颜色将不会从红色变为蓝色。

In the below code everything functions OK, except that after clicking on the button second time after dropdown opens, the color won't turn from red to blue. Any solutions to this please?

=

snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

    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>

推荐答案

问题是，您使用 focus 伪类将背景颜色设置为红色。单击具有焦点的元素不会从该元素中删除焦点。您可以在点击元素时潜在地 blur ，但是您必须有一种方法来确定点击是激活按钮还是停用。

The problem is that you're using the focus pseudo-class to set the background color to red. Clicking on an element that has focus doesn't remove focus from that element. You could potentially blur the element when it's clicked, but you'd have to have a way to determine if the click is activating the button or deactivating it.

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

An easier solution would be to just use a normal class rather than trying to leverage the focus pseudo-class in this way. Since you already have a JS click event handler, you can just put code in there to toggle a class on the button specifying if it's been clicked or not, and then use that class to set the red background. You'll need to remove that class from the button in the window click handler as well, since just removing the focus will no longer revert the button's background color. You might want to look at how I did this for some hints on how you might improve the code you already had in the window click handler, as well.

    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>

这篇关于第二次单击下拉菜单后，CSS焦点不会更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！