使用JavaScript切换菜单叠加层

Question

我目前正在使用JavaScript来显示在我网站上的同一位置呈现的叠加菜单。问题是，当点击菜单外部的空格关闭它们时，单击其他菜单按钮不会关闭它们，它们最终会相互重叠。这是我到目前为止的代码：

＆＃13;

＆＃13;

function navitem1(event) {
  event.stopPropagation();
  document.getElementById("navitem1dropdown").classList.toggle("navitem1contentshow");
}

function navitem2(event) {
  event.stopPropagation();
  document.getElementById("navitem2dropdown").classList.toggle("navitem2contentshow");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  document.getElementById("navitem1dropdown").classList.remove("navitem1contentshow");
  document.getElementById("navitem2dropdown").classList.remove("navitem2contentshow");
}

＆＃13;

#navitem1 {
  display: inline-block;
  background: url('images/inbox.png');
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  width: 15%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #f3ac12;
  cursor: pointer;
}

#navitem1:hover {
  background-color: #e7f4fa;
}

#navitem1:active {
  background-color: #e7f4fa;
}

#navitem1 .text {
  position: relative;
  bottom: 25px;
  left: -0px;
  visibility: hidden;
}

#navitem1:hover .text {
  visibility: visible;
}

.navitem1content {
  display: none;
  position: absolute;
  margin-top: 20px;
  left: 0.40%;
  background-color: #fff;
  width: 24.1%;
  min-width: 256px;
  max-width: 360px;
  height: 400px;
  padding: 10px;
  border: 1px solid #5b696c;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}

.navitem1contentshow {
  display: block;
}

#navitem2 {
  display: inline-block;
  background: url('images/music.png');
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  width: 15%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #9e33ef;
}

#navitem2:hover {
  background-color: #e7f4fa;
}

#navitem2:active {
  background-color: #e7f4fa;
}

#navitem2 .text {
  position: relative;
  bottom: 25px;
  left: -0px;
  visibility: hidden;
}

#navitem2:hover .text {
  visibility: visible;
}

.navitem2content {
  display: none;
  position: absolute;
  margin-top: 20px;
  left: 0.40%;
  background-color: #fff;
  width: 24.1%;
  min-width: 256px;
  max-width: 360px;
  height: 400px;
  padding: 10px;
  border: 1px solid #5b696c;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}

.navitem2contentshow {
  display: block;
}

＆＃13;

<div id="navitem1" onclick="navitem1(event)">
  <p class="text">Inbox</p>
  <div id="navitem1dropdown" class="navitem1content"></div>
</div>
<div id="navitem2" onclick="navitem2(event)">
  <p class="text">Music</p>
  <div id="navitem2dropdown" class="navitem2content"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

选择另一个时，从下拉列表中删除未显示的show class。这涵盖了是否已经切换的问题。

function navitem1(event) {
    event.stopPropagation();
    document.getElementById( "navitem2dropdown" ).classList.remove( "navitem2contentshow" );
    document.getElementById( "navitem1dropdown" ).classList.toggle( "navitem1contentshow" );
}

function navitem2(event) {
    event.stopPropagation();
    document.getElementById( "navitem1dropdown" ).classList.remove("navitem1contentshow");
    document.getElementById( "navitem2dropdown" ).classList.toggle( "navitem2contentshow" );
}

Answer 2

我建议您确保在点击时隐藏 其他内容，然后在block和none {{1}之间切换在你尝试切换的元素上陈述：

＆＃13;

＆＃13;

display

＆＃13;

function navitem1(event) {
  event.stopPropagation();
  document.getElementById("navitem2dropdown").style.display = 'none';
  if (document.getElementById("navitem1dropdown").style.display == 'none') {
    document.getElementById("navitem1dropdown").style.display = 'block';
  } else {
    document.getElementById("navitem1dropdown").style.display = 'none';
  }
}

function navitem2(event) {
  event.stopPropagation();
  document.getElementById("navitem1dropdown").style.display = 'none';
  if (document.getElementById("navitem2dropdown").style.display == 'none') {
    document.getElementById("navitem2dropdown").style.display = 'block';
  } else {
    document.getElementById("navitem2dropdown").style.display = 'none';
  }
}

＆＃13;

#navitem1 {
  display: inline-block;
  background: url('images/inbox.png');
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  width: 15%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #f3ac12;
  cursor: pointer;
}

#navitem1:hover {
  background-color: #e7f4fa;
}

#navitem1:active {
  background-color: #e7f4fa;
}

#navitem1 .text {
  position: relative;
  bottom: 25px;
  left: -0px;
  visibility: hidden;
}

#navitem1:hover .text {
  visibility: visible;
}

.navitem1content {
  display: none;
  position: absolute;
  margin-top: 20px;
  left: 0.40%;
  background-color: #fff;
  width: 24.1%;
  min-width: 256px;
  max-width: 360px;
  height: 400px;
  padding: 10px;
  border: 1px solid #5b696c;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}

.navitem1contentshow {
  display: block;
}

#navitem2 {
  display: inline-block;
  background: url('images/music.png');
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  width: 15%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #9e33ef;
}

#navitem2:hover {
  background-color: #e7f4fa;
}

#navitem2:active {
  background-color: #e7f4fa;
}

#navitem2 .text {
  position: relative;
  bottom: 25px;
  left: -0px;
  visibility: hidden;
}

#navitem2:hover .text {
  visibility: visible;
}

.navitem2content {
  display: none;
  position: absolute;
  margin-top: 20px;
  left: 0.40%;
  background-color: #fff;
  width: 24.1%;
  min-width: 256px;
  max-width: 360px;
  height: 400px;
  padding: 10px;
  border: 1px solid #5b696c;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
}

.navitem2contentshow {
  display: block;
}

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）