css सीएसएस फोकस ड्रॉपडाउन मेनू पर दूसरी क्लिक के बाद रंग बदलता नहीं है




colors menu (3)

नीचे दिए गए कोड में सभी कार्य ठीक है, सिवाय इसके कि ड्रॉपडाउन खुलने के बाद दूसरी बार बटन पर क्लिक करने के बाद, रंग लाल से नीला नहीं होगा कृपया इसका कोई समाधान करें?

धन्यवाद,
सी.पी.

    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>


समस्या यह है कि आप पृष्ठभूमि रंग को लाल रंग में सेट करने के लिए छद्म-वर्ग का उपयोग कर रहे हैं। किसी तत्व पर फ़ोकस करने पर उस तत्व से फ़ोकस नहीं निकलता है जब क्लिक किया जाता है, तो आप संभावित रूप से तत्व को blur कर सकते हैं, लेकिन आपको यह निर्धारित करने का एक तरीका होगा कि क्या क्लिक बटन सक्रिय कर रहा है या उसे निष्क्रिय कर रहा है।

एक आसान समाधान इस तरह से फ्यूंस छद्म-वर्ग का लाभ उठाने की कोशिश करने के बजाय सिर्फ एक सामान्य वर्ग का उपयोग करना होगा। चूंकि आपके पास पहले से ही एक जेएस क्लिक ईवेंट हैंडलर है, आप बटन को क्लिक कर सकते हैं या नहीं, निर्दिष्ट करने के लिए बटन पर एक वर्ग को टॉगल करने के लिए बस उस कोड को डाल सकते हैं, और तब उस कक्षा का उपयोग लाल पृष्ठभूमि सेट करने के लिए कर सकते हैं। आपको खिड़की के बटन पर बटन से उस क्लास को निकालने की आवश्यकता होगी, क्योंकि बस फ़ोकस को हटाने से बटन का पृष्ठभूमि रंग वापस नहीं होगा। आप यह देख सकते हैं कि मैंने यह कैसे कुछ संकेतों के लिए किया था कि आप पहले से ही विंडो क्लिक हैंडलर में जिस कोड को पहले से बना चुके थे, उसे सुधारने के लिए भी।

    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>


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


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 = "";
    }
}

और फिर इसे सीएसएस से निकाल सकते हैं:

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

यहाँ CodePen उदाहरण है

या अपने एचटीएमएल को बदल सकते हैं ताकि शुद्ध सीएसएस के जरिए प्रभाव प्राप्त किया जा सके।





focus