css - 第二次单击按钮后失去焦点

Question

我有以下样式:

.btn-dropdown {
  height: 30px;
  background: transparent;
  border: solid 1.4px #ffffff;
  font-size: 10px;
  color: white;
  min-width: 0;
  max-width: fit-content;
  padding-left: 15px;
  padding-bottom: 6px;

  &:hover {
    background: white;
    color: $blue;
  }

  &:active,
  &:focus {
    background: white;
    color: $blue;
    box-shadow: none;
    outline:none;  
    &::after {
      background: transparent;
    }
  }
}

html

   <button type="button" class="btn btn-dropdown dropdown-toggle">
                   abcd          
   <i class="far fa-chevron-down"></i>
    </button>

我想实现以下行为:

1) 第二次点击按钮后，它应该失去焦点。

纯 SCSS/CSS 有可能吗？我用谷歌搜索了一下，发现了一些不令人满意的解决方案，例如指针事件:无 ..

提前致谢

Answer 1

我有一个 CSS 和 JavaScript(没有 jQuery)的解决方案:

function isHidden(el) {
  var style = window.getComputedStyle(el);
  return (style.display === 'none')
}

const list = document.getElementById('drop');
const btn = document.getElementById('btn');

btn.addEventListener("click", function() {
  if (isHidden(list) == true) {
    btn.classList.add("active");
    list.style.display = 'flex';
  } else {
    btn.classList.remove("active");
    list.style.display = 'none'
  }
});

body {
  background: #121212;
}

.list-group {
  display: none;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group.active {
  display: flex;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.btn-dropdown {
  height: 30px;
  background: transparent;
  border: solid 1.4px #ffffff;
  font-size: 10px;
  color: white;
  min-width: 0;
  max-width: fit-content;
  padding-left: 15px;
  padding-bottom: 6px;
}

.btn-dropdown:hover {
  background: white;
  color: #069;
}

.btn-dropdown.active {
  background: white;
  color: #069;
  box-shadow: none;
  outline: none;
}

.btn-dropdown.active::after {
  background: transparent;
}

<button type="button" id="btn" class="btn btn-dropdown dropdown-toggle">Button          
       <i class="fa fa-chevron-down"></i>
</button>

<ul class="list-group" id="drop">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

由于悬停状态，当您悬停时按钮仍然具有白色背景:

.btn-dropdown:hover {
  background: white;
  color: #069;
}

如果您“取消悬停”，它就会变得透明。

SASS版本可见 this jsFiddle。