CSSを使用してボタンをクリックして一部のコンテナを表示または非表示にしたいとします。今、私はコンテナを表示することができますが、同じボタンをクリックすることでそれを隠す方法を以下のようにしていますか？フォーカスを使用して要素を表示および非表示にすることができますか？
（チェックボックスで）のみCSSを使用してトグル.button {
&:focus {
& + .menu-list {
display: block;
}
}
}
これは少しアップデートです。 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>ではなく、チェックボックスとラベルを使用し、：疑似クラスをチェックします。 - 以下CBroe 7
オリジナルポスト：
多くは、トグル方式を使用します。最も簡単な - 私の知る限りでは - 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>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#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>あなたはこのようにjQueryを使用してトグル機能を使用することができます。
$(".button").click(function(){
$("your container id").toggle();
});
それはあなたのコンテナブロックを切り替える必要があります。
部分的な解決策として、: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>
あなたが「トグル」機能が必要な場合は、JavaScriptを使用しなければならない... –
代わりにチェックボックスとラベルを使用し、そして：擬似クラスをチェックします。 – CBroe
'.toggleClass（）'を使用してください。 –