Блог

Я создаю кнопки навигации, которые при нажатии будут выпадать из подменю, используя ввод флажка. Всякий раз, когда пользователь нажимает на ввод метки, проверяется и выпадающее меню опускается, при повторном нажатии на метку она сворачивается обратно.

Но теперь мне нужно выполнить определенное действие, я пытаюсь свернуть выпадающее меню при нажатии на любой элемент HTML, поэтому пользователю не нужно нажимать на определенный элемент, чтобы свернуть меню.

HTML и 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"> amp;#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 . смотрите полный код. (удалите теги комментариев для примера полной ширины).

Итак, в заключение, как я мог бы добиться этого, не заставляя другие элементы исчезать, у меня есть какая-то ошибка в коде? является ли первый пример хорошим решением? Если да, то как? Как я могу заставить меню сворачиваться обратно, когда пользователь нажимает на любой элемент HTML? Может ли это быть достигнуто без использования Javascript?

Если вы согласны с решением 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"> amp;#9660;</b></label></li>
        <div class="dropdown-menu">
            <a href="#">Link</a>
        </div>
    </div>