我正在try 创建一个菜单,在那里点击帐户将显示菜单,再次点击将关闭菜单.同样,如果有人在菜单外单击,菜单将关闭.我可以做任何事情,但如果有问题,即使我点击菜单中的一个链接,菜单也会关闭.我只想关闭菜单,如果有人再次点击菜单外的帐户按钮.解决方案是什么?

/* 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 if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn span')) {
    var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  z-index: 9;
  width: 200px;
  top: 72px;
  left: 20px;
  background: #fff;
  position: absolute;
  box-shadow: 0px 0px 13px #0000001a;
  border-radius: 5px;
  padding: 17px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border: none;
}

.dropdown-content a:hover {
  background-color: #dddddd54;
  border: none;
  border-radius: 5px;
}

.show {
  display: block;
}
<div class="right-side-menu">
  <div class="menu-item" onclick="searchFunction()"><span class="icon fa-solid fa-magnifying-glass"></span></div>
  <div class="dropbtn menu-item" onclick="myFunction()"><span class="icon fa-regular fa-user"><span class="font">Account</span></span>
  </div>
  <div class="menu-item"><a href="#"><span class="icon fa-regular fa-arrow-right-to-bracket">LogIn</span></a></div>
  <div class="menu-item"><a href="#"><span class="icon fa-regular fa-pen-to-square"><span class="font">Write</span></span></a></div>
  <div class="dropdown-content" id="myDropdown">
    <a href="#"><i class="rbi rbi-bookmark"></i>Saved Article</a>
    <a href="#"><i class="fa-regular fa-clipboard"></i>My Article</a>
    <a href="#"><i class="fa-regular fa-chart-bar"></i>My Profile</a>
    <a href="#"><i class="red fa-solid fa-arrow-right-from-bracket"></i>Log Out</a>
  </div>
</div>

推荐答案

您可以使用Node.contains()来判断所单击的目标是否在您的下拉式容器中.

使用这种方法会遇到的唯一问题是,一旦Click事件冒泡到根元素,事件侦听器将立即删除show类.要解决此问题,您需要停止Account按钮上的Click事件以向上传播到文档.这可以使用Event.stopPropagation()方法来完成.

const dropdown = document.querySelector("#myDropdown");
const dropdownBtn = document.querySelector(".dropbtn");

// Close the dropdown if the user clicks outside of it
document.addEventListener("click", function (e) {
  if (!dropdown.contains(e.target)) { 
    dropdown.classList.remove("show");
  }
});

// When the user clicks on the button, 
// toggle between hiding and showing the dropdown content 
// without triggering the other event listener
dropdownBtn.addEventListener("click", function (e) {
  e.stopPropagation()
  dropdown.classList.toggle("show");
});
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  z-index: 9;
  width: 200px;
  top: 72px;
  left: 20px;
  background: #fff;
  position: absolute;
  box-shadow: 0px 0px 13px #0000001a;
  border-radius: 5px;
  padding: 17px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border: none;
}

.dropdown-content a:hover {
  background-color: #dddddd54;
  border: none;
  border-radius: 5px;
}

.show {
  display: block;
}
<div class="right-side-menu">
  <div class="menu-item" onclick="searchFunction()"><span class="icon fa-solid fa-magnifying-glass"></span></div>
  <div class="dropbtn menu-item"><span class="icon fa-regular fa-user"><span class="font">Account</span></span>
  </div>
  <div class="menu-item"><a href="#"><span class="icon fa-regular fa-arrow-right-to-bracket">LogIn</span></a></div>
  <div class="menu-item"><a href="#"><span class="icon fa-regular fa-pen-to-square"><span class="font">Write</span></span></a></div>
  <div class="dropdown-content" id="myDropdown">
    <a href="#"><i class="rbi rbi-bookmark"></i>Saved Article</a>
    <a href="#"><i class="fa-regular fa-clipboard"></i>My Article</a>
    <a href="#"><i class="fa-regular fa-chart-bar"></i>My Profile</a>
    <a href="#"><i class="red fa-solid fa-arrow-right-from-bracket"></i>Log Out</a>
  </div>
</div>

Javascript相关问答推荐

如何在bslib nav_insert之后更改导航标签的CSS类和样式?

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存?

类构造函数不能在没有用With Router包装的情况下调用

如何在使用rhandsontable生成表时扩展数字输入验证?

有条件重定向到移动子域

第二次更新文本输入字段后,Reaction崩溃

如何在.NET Core中将chtml文件链接到Java脚本文件?

如何在箭头函数中引入or子句?

在JS中动态创建对象,并将其追加到HTML表中

expo 联系人:如果联系人的状态被拒绝,则请求访问联系人的权限

每次重新呈现时调用useState initialValue函数

更新Redux存储中的对象数组

如何根据输入数量正确显示alert ?

TypeORM QueryBuilder限制联接到一条记录

React数组查找不读取变量

如果查询为空,则MongoDB将所有文档与$in匹配

Google OAuth 2.0库和跨域开放程序的问题-策略错误

使用JAVASCRIPT的偏移力矩函数库问题

在promise.all之前选中NULL

如何制作弹出式滑出动画