时间戳

首页 > 解决方案 > 单击链接时使用 js 打开带有悬停和关闭菜单的下拉菜单

javascript - 单击链接时使用 js 打开带有悬停和关闭菜单的下拉菜单

问题描述

单击链接时，我需要使用 javasript 关闭下拉菜单。我有一个用鼠标打开的下拉菜单：悬停。现在我需要一个功能，当单击菜单中的“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 关闭下拉菜单。我有一个用鼠标打开的下拉菜单：悬停。现在我需要一个功能，当单击菜单中的“down1”之类的链接时关闭菜单。但我不知道该怎么做。

标签： javascripthtmlcss

解决方案

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

$(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>

推荐阅读