javascript - 下拉菜单单击外部子菜单隐藏不适用于我的菜单类型(请先阅读)

Question

我想是因为我使用了type=checkbox

 <ul id="menutaal">
      <li class="main-menu">
        <input class="menuinput" id="check01" type="checkbox" name="menu"/>
        <label class="menulabel"for="check01"><img id="english2" src="images/english.png"></label>
        <ul class="submenu">
          <li class="submenu"><a href="javascript:;" onclick='messageOn()'><img id="spanish2" src="images/spanish.png"></a></li>
          <li class="submenu"><a href="javascript:;" onclick='messageOn1()'><img id="dutch2" src="images/dutch.png"></a></li>
        </ul>
      </li>
        </ul>

当我使用典型的修复代码时，它会隐藏子菜单，但不会进入关闭模式，因此当我再次单击菜单时，什么也没有发生，然后它就可以工作，但是当我单击子菜单外部和菜单中时它再次显示没有子菜单。

CSS 是:

ul#menutaal{
  position:absolute;
  top:0;
  width: 9.5vw;
    max-width: 9.5vw;

  margin-top:1vh;
  padding:0 0px;
  background:rgba(0,0,0,0.0);
  color: #eee;
    right:0;

}

ul#menutaal > li{

  list-style-type:none;
  position:relative;


}

.menulabel{
  position:relative;
  display:block;
  padding:0;
    width:9vw;
    height:9vh;
    max-height:7vh;
  line-height:3em;
  transition:background 0.3s;
  cursor:pointer;
    max-width:9vw;

}

.menulabel:after{
  content:"";
  position:absolute;
  display:block;
  top:4.85vh;
  right:0.2vw;
  width:0;
  height:0;
  border-top:0.28vw solid black;
  border-bottom:0 solid black;
  border-left:0.28vw solid transparent;
  border-right:0.28vw solid transparent;
  transition:border-bottom .1s, border-top .1s .1s;

  }

.menulabel:hover,
input:checked ~ label{background:rgba(212,212,212,0.4);
border-radius:5% 5% 0% 0%;}

input:checked ~ label:after{
  border-top:0 solid black;
  border-bottom:0.28vw solid black;
  transition:border-top .1s, border-bottom .1s .1s;
}


.menuinput{display:none}



    input:checked ~ ul.submenu{
  max-height:20vh;
  transition:max-height 0.3s ease-in;
}


ul.submenu{
  max-height:0%;
margin-left:0.1vw;
    border-radius:0% 0% 5% 5%;
  padding:0;
    width:8.8vw;
    max-width:8.8vw;
  overflow:hidden;
  list-style-type:none;
  background:rgba(236,236,236,1);
  box-shadow:0 0 1px rgba(0,0,0,0.5);
  transition:max-height 0.3s ease-out;
  position:absolute;
  min-width:0vw;
    z-index:99999;
}

ul.submenu li a{
  display:block;
 height:5.8vh;
  color:#ddd;
  text-decoration:none;
  box-shadow:0 -1px rgba(0,0,0,0.2) inset;
  transition:background .3s;
  white-space:nowrap;
}

ul.submenu li a:hover{
  background:rgba(117, 161, 221, 0.8);
}

我忙了 8 个小时，这让我发疯，然后我睡了，当我醒来时，我发布了这个问题。

请大家不要对我的问题投反对票，因为我认为，我几乎可以肯定我的问题与其他十个问题不同。

我希望有人可以帮助我使子菜单不隐藏，而是让当您单击html时子菜单再次升起，就像单击菜单按钮一样当它需要上升时再次。这样，该操作与单击 html 相同，就像单击“关闭”菜单时它有一个操作一样。

我尝试过:

$('#menutaal').click(function(e){
   $('#menutaal').hide();
})
$('#menutaal').click(function(e){
    e.stopPropagation();
})

测试e.stopPropagation是否有效，但它不起作用。因为 e.stopPropagation 应该防止 #menutaal 隐藏，对吧？

我真的尝试了所有关于提问的方法，这就是我写这篇文章的原因。

非常感谢您的帮助。

Answer 1

我猜你需要捕获整个文档的点击事件:

$(document).click(function(event) {
    $('#check01').prop('checked', false);
});

当点击菜单时，您还需要停止传播

$('#menutaal').click(function(e) {
    e.stopPropagation();
});

$('#menutaal').click(function(e) {
  e.stopPropagation();
});

$(document).click(function(event) {
  $('#check01').prop('checked', false);
});

function messageOn() {
  console.log('messageOn');
}

function messageOn1() {
  console.log('messageOn1');
}

ul#menutaal {
  position: absolute;
  top: 0;
  margin-top: 1vh;
  padding: 0 0px;
  background: rgba(0, 0, 0, 0.0);
  color: #f00;
}

ul#menutaal>li {
  list-style-type: none;
  position: relative;
}

.menulabel {
  position: relative;
  display: block;
  padding: 0;
  width: 9vw;
  height: 9vh;
  max-height: 7vh;
  line-height: 3em;
  transition: background 0.3s;
  cursor: pointer;
  max-width: 9vw;
}

.menulabel:after {
  content: "";
  position: absolute;
  display: block;
  top: 4.85vh;
  right: 0.2vw;
  width: 0;
  height: 0;
  border-top: 0.28vw solid black;
  border-bottom: 0 solid black;
  border-left: 0.28vw solid transparent;
  border-right: 0.28vw solid transparent;
  transition: border-bottom .1s, border-top .1s .1s;
}

.menulabel:hover,
input:checked~label {
  background: rgba(212, 212, 212, 0.4);
  border-radius: 5% 5% 0% 0%;
}

input:checked~label:after {
  border-top: 0 solid black;
  border-bottom: 0.28vw solid black;
  transition: border-top .1s, border-bottom .1s .1s;
}

.menuinput {
  display: none
}

input:checked~ul.submenu {
  max-height: 20vh;
  transition: max-height 0.3s ease-in;
}

ul.submenu {
  max-height: 0%;
  margin-left: 0.1vw;
  border-radius: 0% 0% 5% 5%;
  padding: 0;
  width: 8.8vw;
  max-width: 8.8vw;
  overflow: hidden;
  list-style-type: none;
  background: rgba(236, 236, 236, 1);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  transition: max-height 0.3s ease-out;
  position: absolute;
  min-width: 0vw;
  z-index: 99999;
}

ul.submenu li a {
  display: block;
  height: 5.8vh;
  color: #ddd;
  text-decoration: none;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.2) inset;
  transition: background .3s;
  white-space: nowrap;
}

ul.submenu li a:hover {
  background: rgba(117, 161, 221, 0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menutaal">
  <li class="main-menu">
    <input class="menuinput" id="check01" type="checkbox" name="menu" />
    <label class="menulabel" for="check01">ENGLISH</label>
    <ul class="submenu">
      <li class="submenu">
        <a href="javascript:;" onclick='messageOn()'>SPANISH</a>
      </li>
      <li class="submenu">
        <a href="javascript:;" onclick='messageOn1()'>DUTCH</a>
      </li>
    </ul>
  </li>
</ul>