我可以使用：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

以下原帖：

Vanilla 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>

具有焦点/模糊的Vanilla JavaScript切换方法

您也可以使用您的解决方案但不知何故需要根据需要取消对焦（blur）按钮，可能是这样的：

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>

Answer 2

你可以使用像这样的jquery来使用切换功能：

$(".button").click(function(){
    $("your container id").toggle();
});

应切换容器块。

Answer 3

对于部分解决方案，您可以利用:focus-within。

您可以点击按钮打开菜单，然后点击其他地方关闭它 - 不幸的是，在这种情况下按钮本身不会作为切换。

请注意，:focus-within没有普遍支持。 More info

.menu-list {
  display: none;
}

.container:focus-within .menu-list {
  display: block;
}

<div class="container">
  <button class="button">Open Menu</button>
  <div class="menu-list">Hello world</div>
</div>