html - 我可以使用 :focus 显示和隐藏元素吗

Question

我想通过使用 CSS 单击按钮来显示/隐藏一些容器。现在，我有类似下面的东西，它允许我显示容器，但如何通过单击相同的按钮来隐藏它？

.button {
        &:focus {
            & + .menu-list {
                display: block;
            }
        }
}

Answer 1

仅使用 CSS 切换(带有复选框)

这是一个小更新。正如 CBroe 在评论中所述，您可以使用复选框和 CSS 实现此目的:

#toggle-button,
.menu-list {
  display: none;
}

#toggle-button:checked + .menu-list {
  display: block;
}

<label for="toggle-button">open/close</label>
<input type="checkbox" id="toggle-button" />

<div class="menu-list">Hello world</div>

改用复选框和标签，以及 :checked 伪类。 – CBroe 7

原帖如下:

---

普通 JavaScript 切换方法

正如评论中提到的那样，使用切换方法。据我所知，最简单的方法是使用 HTMLElement#classList.toggle:

const menuList = document.querySelector( '.menu-list' );
document.querySelector( '.toggle-button' ).addEventListener( 'click', () => {
  menuList.classList.toggle( '-visible' );
} );

.menu-list {
  display: none;
}

.menu-list.-visible {
  display: block;
}

<button class="toggle-button">open/close</button>
<div class="menu-list">Hello world</div>

---

带有焦点/模糊的普通 JavaScript 切换方法

您也可以使用您的解决方案，但不知何故需要根据需要取消焦点(模糊)按钮，可能是这样的:

const menuList = document.querySelector( '.menu-list' );
const button = document.querySelector( '.toggle-button' );
let isVisible = false;

button.addEventListener( 'click', () => {
  isVisible = !isVisible;
  if ( !isVisible ) {
    button.blur();
  }
} );

.menu-list {
  display: none;
}

.toggle-button:focus + .menu-list {
  display: block;
}

<button class="toggle-button">open/close</button>
<div class="menu-list">Hello world</div>

---

jQuery 切换方法

当然，jQuery#toggleClass 也有一个简单的解决方案，而且当您已经在使用 jQuery 时仍然非常有效:

const $menuList = $( '.menu-list' );
$( '.toggle-button' ).click( () => $menuList.toggleClass( '-visible' ) );

.menu-list {
  display: none;
}

.menu-list.-visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-button">open/close</button>
<div class="menu-list">Hello world</div>