javascript 如何关闭菜单时点击外部的div?

v1uwarro  于 2023-04-19  发布在  Java
关注(0)|答案(4)|浏览(123)

我希望能够关闭弹出菜单时,用户点击外。我如何才能实现这一点在纯JS?
以下是我目前正在使用的代码:

function list(){
	var r= document.getElementById('l2');
	if (r.style.height==="0px"){
            r.style.height="500px"  
        } else {
            r.style.height="0px";}
}
#logo-menu img {
  width: 4vw;
  height: 2.79vw;
  border-radius: 3px;
  border: 0px solid rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  z-index: 3;
  margin: 0% 0% 0% 0%;
  position: relative;
  top: 0.0vw;
  background: rgba(230, 230, 230, 1);
}

#logo-menu img:hover {
  filter: invert(100%);
}

#logo-menu img:active {
  filter: saturate(20);
  transform: scale3d(1.01, 1.01, 1.01);
}

#l2 {
  margin: -0.17% 0% 0% 0%;
}

#l2 ul {
  width: 100%;
  height: auto;
  list-style-type: none;
  padding: 0px 0px 4% 0px;
  overflow: auto;
}

#l2 li a {
  width: 20.7vw;
  height: auto;
  line-height: 1.2;
  font-weight: bold;
  font-size: 0.8vw;
  word-break: break-word;
  text-align: left;
  color: black;
  text-decoration: none;
  background: rgba(255, 255, 255, 1);
  display: block;
  margin: 3.5% 0% -2% 1.5%;
  padding: 1.5% 0% 2% 0%;
  overflow: hidden;
  border-radius: 5px;
  float: left;
  position: relative;
  left: 4%;
}

#l2 p {
  width: 100%;
  height: auto;
  position: relative;
  left: 2%;
  top: 0.5vw;
}

#l2 img {
  width: 3.5vw;
  height: 3.4vw;
  float: left;
  margin: 0.5% 0% 0% 1%;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
}

#l2 li:hover>a {
  background: rgba(0, 0, 0, 1);
  color: white;
}

#l2 li a:hover img {
  filter: invert(100%);
}

#l2 li:active>a {
  background: rgba(20, 20, 20, 1);
  color: white;
}

.dropdown-content {
  background: rgba(235, 235, 235, 1);
  overflow: auto;
  width: 100%;
  float: left;
  height: 0px;
}
<div id="logo-menu"><img src="https://png.icons8.com/metro/1600/star.png" onclick="list()" class="dropbtn" /></div>
<div id="l2" class="dropdown-content">
  <ul>
    <li>
      <a href="list.html"><img src="pic1.png" />
        <p>list item 1</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic2.png" />
        <p>list item 2</p>
      </a>
    </li>

    <li>
      <a href="list.html"><img src="pic3.png" />
        <p>list item 3</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic4.png" />
        <p>list item 3</p>
      </a>
    </li>
    <li>
      <a href="list.html"> <img src="pic5.png">
        <p>list item 4</p>
      </a>
    </li>
    <li>
      <a href="list.html"> <img src="pic6 .png">
        <p>list item 5</p>
      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic7 .png">
        <p>list item 6</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic8 .png">
        <p>list item 7</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic9 .png">
        <p>list item 8</p>

      </a>
    </li>
    <li>
      <a href="list.html"><img src="pic10 .png">
        <p>list item 9</p>

      </a>
    </li>
  </ul>
</div>
k97glaaz

k97glaaz1#

你可以试试window.addEventListener,我假设div之外是l2 & logo-menu div,希望下面的代码能帮到你。

window.addEventListener('click', function(e){
    if (!document.getElementById('l2').contains(e.target) && (!document.getElementById('logo-menu').contains(e.target))){
    alert("Clicked outside l2 and logo-menu");
     document.getElementById('l2').style.height="0px"; //the same code you've used to hide the menu
  } 
})
kupeojn6

kupeojn62#

这对我很有效

window.addEventListener('mouseup', function(e) {
    var x = document.querySelector('#mylinks');
    if (event.target != document.querySelector(".icon")) {
        x.style.display = "none";
    }
});

#mylinks具有单击.icon时显示的内容
我使用style.display来显示或隐藏内容。

jxct1oxe

jxct1oxe3#

此功能可以通过在文档对象中附加一个事件监听器来实现,监听点击事件,然后在事件监听器中检查点击目标是否在菜单内,如果点击目标在菜单外,则可以关闭菜单。

const menuButton = document.getElementById('menu-button');
const menu = document.getElementById('menu');

// show/hide the menu when the button is clicked
menuButton.addEventListener('click', () => {
  menu.classList.toggle('hidden');
});

// hide the menu when a click event occurs outside the menu
document.addEventListener('click', (event) => {
  if (!menu.contains(event.target) && !menuButton.contains(event.target)) {
    menu.classList.add('hidden');
  }
});
.hidden {
  display: none;
}
#menu{
  background: #f7f7f7;
}
<button id="menu-button">Menu</button>
<ul id="menu" class="hidden">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
xriantvc

xriantvc4#

你可以用

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

在你的函数内部,而不是设置px的高度。

相关问题