How To Prevent Drop Down Menu From Closing When User Clicks Into It?

I followed a tutorial on W3Schools website about making a dropdown menu from a button. Everything works fine EXCEPT that when the user clicks inside the dropdown menu the menu itself disappears.

I wanted to make a LOGIN button where the user clicks on the button, it displays a dropdown menu where he/she can input his/her username and password and click Login.

I want to keep the feature where if the user clicks any other area outside the drop down menu, it would automatically close the drop down menu.

My problem is that the dropdown menu disappears when the user clicks any area inside it. How do I prevent it from disappearing while clicking inside the drop down menu using only JavaScript ? What about using jQuery (I'm not really familiar with jQuery yet)

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

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

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Contents inside the dropdown */
.dropdown-content input, .dropdown-content button {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">LOG IN</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" name="username" placeholder="Enter username"/>
    <input type="text" name="password" placeholder="Enter password"/>
    <button type="submit" name="submit">Submit</button>
  </div>
</div>

---

在window.onClick处理程序中，我们添加一个条件来排除“下拉内容”及其子项。

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    // [BEGIN][Here is the condition]
    if (event.target.matches('.dropdown-content') || event.target.matches('.dropdown-content *') ) {
       event.stopPropagation();
       return;
    }
  // [END][Here is the condition]
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Contents inside the dropdown */
.dropdown-content input, .dropdown-content button {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">LOG IN</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" name="username" placeholder="Enter username"/>
    <input type="text" name="password" placeholder="Enter password"/>
    <button type="submit" name="submit">Submit</button>
  </div>
</div>

---

当你点击内部下拉菜单时，你不应该删除显示类

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
   
  if (event.target.matches('.dropdown-content *')) {
    return;
   } 

  if (!event.target.matches('.dropbtn')) {

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

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Contents inside the dropdown */
.dropdown-content input, .dropdown-content button {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">LOG IN</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" class="form-input" name="username" placeholder="Enter username"/>
    <input type="text" class="form-input" name="password" placeholder="Enter password"/>
    <button type="submit" name="submit">Submit</button>
  </div>
</div>

链接地址: http://www.djcxy.com/p/83968.html

上一篇: 切换而不是转到使用网址的页面

下一篇: 如何防止下拉菜单从用户点击进入时关闭？