Question

我正在创建导航按钮，使用复选框输入时会在单击时下拉子菜单。每当用户点击标签时，都会检查输入并关闭菜单，再次单击标签时，它会折叠回来。

但是现在我需要执行特定的操作，我试图在点击任何HTML元素时使下拉菜单崩溃，因此用户不需要单击特定元素来折叠菜单。

HTML＆amp; CSS代码专门用于下拉菜单：

<ul class="down-bar" style="list-style:hidden">
    <div class="dropdown">
        <input type="checkbox" value="drop" id="drop-1" class="dropper">
        <li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Click <b class="caret"> &#9660;</b></label></li>
        <div class="dropdown-menu">
            <a href="#">Link</a>
        </div>
    </div>

CSS：

.dropdown {
  display: inline-block;
  float: left;
  padding-top: 0em;
  transition: 0.1s ease-in;
  margin-top: 1.5%;
  white-space: nowrap;
}
.dropdown-menu {
  float: left;
  display: none;
  top: 0%;
  margin-top: 2.2%;
  width: 8%;
  min-width: 50px;
  padding-left: 18px;
  background-color: rgba(26, 26, 26, 2);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
  list-style-type: none;
  transition: 0.1s ease-in;
  border-color: black;
  border-radius: 3px;
}
.dropdown-menu a {
  color: white;
  font-size: 0.9em;
  padding: 0px 2px 0px 0px;
  text-decoration: none;
  display: block;
  list-style-type: none;
  white-space: nowrap;
  left: 0%;
  margin-left: 0%;
}
.dropdown-menu a:hover {
  color: #C90205;
}
.dropper {
  display: none;
  visibility: hidden;
}
.dropper:checked ~ .dropdown-menu {
  display: block;
  z-index: 99;
}
.dropper:checked ~ li #down-nav-1 {
  border: solid 3px gray;
  background-color: gray;
  margin-top: 1.5%;
  margin-left: 3%;
  border-radius: 10px;
}

我尝试了一些示例，例如使用全宽锚标记，但主菜单会消失，我将使用:active标记将菜单显示更改回None 。见full code。（删除全宽示例的注释标记）。

所以在结论中，如何在不使其他元素消失的情况下实现这一点，我在代码中是否存在错误？是第一个好的解决方案吗？如果是这样，怎么样？当用户点击任何HTML元素时，如何让菜单折叠？这可以在不使用Javascript的情况下实现吗？

Answer 1

如果你对javascript解决方案没问题，你可以使用这个例子：

$(document).click(function(e) {
  if (! ($('#down-nav-1').is(e.toElement) || $('#drop-1').is(e.toElement))) {
    $('.dropper').prop('checked', false)
  }
});

.dropdown {
  display: inline-block;
  float: left;
  padding-top: 0em;
  transition: 0.1s ease-in;
  margin-top: 1.5%;
  white-space: nowrap;
}
.dropdown-menu {
  float: left;
  display: none;
  top: 0%;
  margin-top: 2.2%;
  width: 8%;
  min-width: 50px;
  padding-left: 18px;
  background-color: rgba(26, 26, 26, 2);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
  list-style-type: none;
  transition: 0.1s ease-in;
  border-color: black;
  border-radius: 3px;
}
.dropdown-menu a {
  color: white;
  font-size: 0.9em;
  padding: 0px 2px 0px 0px;
  text-decoration: none;
  display: block;
  list-style-type: none;
  white-space: nowrap;
  left: 0%;
  margin-left: 0%;
}
.dropdown-menu a:hover {
  color: #C90205;
}
.dropper {
  display: none;
  visibility: hidden;
}
.dropper:checked ~ .dropdown-menu {
  display: block;
  z-index: 99;
}
.dropper:checked ~ li #down-nav-1 {
  border: solid 3px gray;
  background-color: gray;
  margin-top: 1.5%;
  margin-left: 3%;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="down-bar" style="list-style:hidden">
    <div class="dropdown">
        <input type="checkbox" value="drop" id="drop-1" class="dropper">
        <li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Click <b class="caret"> &#9660;</b></label></li>
        <div class="dropdown-menu">
            <a href="#">Link</a>
        </div>
    </div>

用户单击任何HTML元素时执行特定操作

1 个答案: