Question

点击链接时，我需要使用javasript关闭下拉菜单。我有一个用mouse：hover打开的Dropdownmenu。现在，我需要一个功能，当从菜单中单击某些链接（例如“ down1”）时，关闭菜单。但是我不知道该怎么办。

.dropdown {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdown-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdown-content1 a:hover {
  background-color: #d86a1e
}

.dropdown:hover .dropdown-content1 {
  display: block;
  width: 100%;
}

<div class="dropdown">
  <div class="gap">
    <h3>Dropdownmenu</h3>

    <button class="dropbt1"><h3>please choose</h3></button>
    <div class="dropdown-content1">
      <a href="#" id="" class="specialLink">down1</a>
      <a href="#" id="" class="specialLink">down2</a>
      <a href="#" id="" class="specialLink">down3</a>
    </div>
  </div>
</div>

点击链接时，我需要使用javasript关闭下拉菜单。我有一个用mouse：hover打开的Dropdownmenu。现在，我需要一个功能，当从菜单中单击某些链接（例如“ down1”）时，关闭菜单。但是我不知道该怎么办。

Answer 1

我已经完成了示例代码，希望对您有所帮助。

$(document).ready(function(){
	$('.dropdown-content1 a').on('click', function(){
		$('.dropdown-content1').hide();
	});
});

.dropdown {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdown-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdown-content1 a:hover {
  background-color: #d86a1e
}

.dropdown:hover .dropdown-content1 {
  display: block;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown">
  <div class="gap">
    <h3>Dropdownmenu</h3>

    <button class="dropbt1"><h3>please choose</h3></button>
    <div class="dropdown-content1">
      <a href="#" id="" class="specialLink">down1</a>
      <a href="#" id="" class="specialLink">down2</a>
      <a href="#" id="" class="specialLink">down3</a>
    </div>
  </div>
</div>

Answer 2

这是一种出色的javascript解决方案，可以重复使用。请注意，由于已关闭菜单的大小和第一个链接的位置，单击第一个链接的上半部分将导致菜单立即重新打开（因为鼠标仍悬停在菜单上）

document.querySelector('body').addEventListener('click', function(e) {
  var clickedElement = e.target;
  if (clickedElement.classList.contains('specialLink')) {
    var menu = clickedElement.parentElement;
    menu.style.display = 'none';
    menu.classList.remove('touched');
    // then remove the style after giving it a chance to close so hovering will reopen the menu
    setTimeout(function() {
      menu.style = '';
    }, 200);
  }
  if (clickedElement.classList.contains('dropbt1')){
    var menu = clickedElement.nextSibling.nextSibling;
    if(!menu.classList.contains('touched'))
      menu.classList.add('touched');
    else
      menu.classList.remove('touched');
  }
});

.dropdown {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdown-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdown-content1 a:hover {
  background-color: #d86a1e
}

.dropdown:hover .dropdown-content1, .dropdown-content1.touched {
  display: block;
  width: 100%;
}
.dropbt1{
  padding:0.5em;
  font-size:1em;
}

<div class="dropdown">
  <div class="gap">
    <h3>Dropdownmenu</h3>

    <button class="dropbt1">please choose</button>
    <div class="dropdown-content1">
      <a href="#" id="" class="specialLink">down1</a>
      <a href="#" id="" class="specialLink">down2</a>
      <a href="#" id="" class="specialLink">down3</a>
    </div>
  </div>
</div>

单击链接时，使用鼠标悬停打开下拉菜单并关闭菜单

2 个答案: