ドロップダウンメニューを2回クリックした後にCSSのフォーカスが変わらない

Question

ドロップダウンが開いてからもう一度ボタンをクリックした後、色が赤から青に変わらない点を除いて、以下のコードはすべて機能します。これに対する解決策は何ですか？

おかげで、
CP

function dropdown_one() { 
 
     document.getElementById("menu_list").classList.toggle("dcontent"); 
 
    } 
 

 
    window.onclick = function(event) { 
 
     if (!event.target.matches('.button')) { 
 

 
     var menu = document.getElementsByClassName("dropdown-content"); 
 
     var i; 
 
     for (i = 0; i < menu.length; i++) { 
 
      var open_list = menu[i]; 
 
      if (open_list.classList.contains('dcontent')) { 
 
      open_list.classList.remove('dcontent'); 
 
      } 
 
     } 
 
     } 
 
    }

.button { 
 
    background-color: blue; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.button:hover { 
 
    background-color: green; 
 
} 
 
.button:focus { 
 
    background-color: red; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    background-color: #efefef; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    right: 0; 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown a:hover { 
 
    background-color: grey 
 
} 
 
.dcontent { 
 
    display: block; 
 
}

<div class="dropdown"> 
 
    <button onclick="dropdown_one()" class="button">Dropdown</button> 
 
    <div id="menu_list" class="dropdown-content"> 
 
    <a href="#home">Home</a> 
 
    <a href="#about">About</a> 
 
    <a href="#contact">Contact</a> 
 
    </div> 
 
</div>

Answer 1

擬似クラスfocusを使用して背景色を赤に設定しているという問題があります。フォーカスのある要素をクリックしても、その要素からフォーカスは削除されません。要素がクリックされたときに要素が潜在的にblurである可能性がありますが、クリックがボタンをアクティブにしているかどうかを判断する方法が必要です。

この方法でfocus疑似クラスを活用しようとするのではなく、通常のクラスを使用する方が簡単な方法です。 JSクリックイベントハンドラを既に持っているので、ボタンをクリックしたかどうかを指定するボタンをトグルして、そのクラスを使用して赤い背景を設定するだけです。フォーカスを削除するだけでボタンの背景色が元に戻ることはないため、ウィンドウクリックハンドラのボタンからそのクラスを削除する必要があります。あなたは、ウィンドウクリックハンドラですでに持っていたコードを改善する方法について、いくつかのヒントについてこれをどうやって見てみたいかもしれません。

function dropdown_one(btn) { 
 
     document.getElementById("menu_list").classList.toggle("dcontent"); 
 
     btn.classList.toggle("button-selected"); 
 
    } 
 

 
    window.onclick = function(event) { 
 
     if (!event.target.matches('.button')) { 
 

 
     var menu = document.getElementsByClassName("dropdown-content"); 
 
     var i; 
 
     for (i = 0; i < menu.length; i++) { 
 
      var open_list = menu[i]; 
 
      if (open_list.classList.contains('dcontent')) { 
 
      open_list.classList.remove('dcontent'); 
 
      } 
 
     } 
 

 
     let selected = document.getElementsByClassName("button-selected"); 
 
     for (let i = 0, len = selected.length; i < len; i++) { 
 
      selected[i].classList.remove("button-selected"); 
 
     } 
 
     } 
 
    }

.button { 
 
    background-color: blue; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.button:hover { 
 
    background-color: green; 
 
} 
 
.button-selected, 
 
.button-selected:hover { 
 
    background-color: red; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    background-color: #efefef; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    right: 0; 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown a:hover { 
 
    background-color: grey 
 
} 
 
.dcontent { 
 
    display: block; 
 
}

<div class="dropdown"> 
 
    <button onclick="dropdown_one(this)" class="button">Dropdown</button> 
 
    <div id="menu_list" class="dropdown-content"> 
 
    <a href="#home">Home</a> 
 
    <a href="#about">About</a> 
 
    <a href="#contact">Contact</a> 
 
    </div> 
 
</div>

Answer 2

.button { 
 
    background-color: blue; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    font-family: sans-serif; 
 
} 
 
.button:hover { 
 
    background-color: green; 
 
} 
 
.button:focus { 
 
    background-color: red; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    background-color: #efefef; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    right: 0; 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown a:hover { 
 
    background-color: grey 
 
} 
 
.dcontent { 
 
    display: block; 
 
} 
 
#butt { 
 
    display: none; 
 
} 
 
label { 
 
    display: inline-block; 
 
} 
 
#butt:checked ~ label .button { 
 
    background-color: red; 
 
} 
 
#butt:checked ~ .dropdown-content { 
 
    display: block; 
 
}

<div class="dropdown"> 
 
    <input type="checkbox" id="butt"> 
 
    <label for="butt"> 
 
    <div class="button">Dropdown</div> 
 
    </label> 
 
    <div id="menu_list" class="dropdown-content"> 
 
    <a href="#home">Home</a> 
 
    <a href="#about">About</a> 
 
    <a href="#contact">Contact</a> 
 
    </div> 
 
</div>

Answer 3

function dropdown_one() { 
    document.getElementById("menu_list").classList.toggle("dcontent"); 
    if (document.getElementById("menu_list").offsetParent !== null) { 
     document.querySelector(".button").style.backgroundColor = "red"; 
    } else { 
     document.querySelector(".button").style.backgroundColor = ""; 
    } 
} 

、その後ティを削除することができますCSSから：

.button:focus { 
    background-color: red; 
} 

ここはCodePenの例です。

または、純粋なCSSを使用して効果を達成できるようにHTMLを変更してください。