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

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？我google了一下，发现了一些不满意的解决方案，比如指针事件：无..

提前致谢

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版本可见thisjsFiddle。

Answer 2

此答案基于（隐藏的）复选框破解。

body {
  background: #121212;
}

/* Magic starts here */
#toggle-checkbox {
  display: none;
}

#toggle-checkbox:checked ~ .list-group {
  display: flex;
}
/* Magic ends here */

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

.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 {
  background: transparent;
  border: solid 1px #fff;
  font-size: 10px;
  color: white;
  border-radius: 5px;
}

.btn-dropdown > label {
  padding: 10px;
  cursor: pointer;
}

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

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

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

<input type="checkbox" id="toggle-checkbox" />

<button type="button" id="btn" class="btn btn-dropdown dropdown-toggle"><label for="toggle-checkbox">Click me</label>
</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>