Question

我有2个下拉按钮。如果我点击外面/或它，它关闭但是如果我点击另一个下拉按钮它不会关闭而另一个下拉。当我点击其他按钮或其他任何内容时，我想关闭它。

＆＃13;

Alexanders-MBP:large-repo alexander$ git clone git@gitlab.example.com:group/project.git
Cloning into 'project'...
ssh: Could not resolve hostname gitlab.example.com: nodename nor servname provided, or not known
fatal: Could not read from remote repository.

＆＃13;

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function myFunction1() {
  document.getElementById("myDropdown1").classList.toggle("show");
}

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

＆＃13;

Answer 1

您可以告诉任何点击隐藏下拉列表，以及任何点击该下拉菜单的父级点击以停止冒泡。

XWalkView

Answer 2

您可以触发myDropdown1点击事件myDropdown的结束，反之亦然。

Answer 3

你可以这样。

main

function myFunction(event, dropDownName) {
  //Pass in your dropdownName which is the dropdown  
  var dropDownHandler = document.getElementById(dropDownName);

  dropDownHandler.classList.toggle("show");
  // Get the trigger element of the dropdown
  var menuHandler = event.currentTarget;

  if (dropDownHandler.classList.contains("show")) {
    //Attach only when the dropdown is active,
    //to ensure onclick isn't called always
    document.addEventListener("click", function(docEvent) {
      documentHandler(docEvent, menuHandler)
    });
  } else {
    dropDownHandler.classList.toggle("show");
    // If is closed, remove the handler
    document.removeEventListener("click", documentHandler);
  }

  function documentHandler(event, menuHandler) {
    if (menuHandler.contains(event.target)) {
      dropDownHandler.classList.add("show");
    } else {
      dropDownHandler.classList.remove("show");
    }
  }
}

.show {
  display: block !important;
}
.dropdown-content {
  display: none;
}

Answer 4

我知道已经有很长时间了，但是如果有人发现自己处于这种情况，我很想回答这个问题。因此，您有两个按钮，因此需要一个循环来关闭每个下拉菜单内容。

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function myFunction1() {
  document.getElementById("myDropdown1").classList.toggle("show");
}


  // This is what I added. you have 2 dropdowns, therefore a loop will
  // close the dropdown content 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');
  }
}
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="index.php" class="cmn-t-underline">Acasa</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()" style="cursor:pointer">Infinatri firme</a>
      <div class="dropdown-content" id="myDropdown">
        <a href="infintare_societate_limitata.php"> Societate cu raspundere limitata (S.R.L.) </a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn" onclick="myFunction1()" style="cursor:pointer">Modificari firma</a>
      <div class="dropdown-content" id="myDropdown1">
        <a href="modificari_actualizare_date.php">Actualizare date de identificare</a>
      </div>
    </li>

如果用户在其外部单击，则关闭下拉列表

4 个答案: