Я создал раскрывающееся меню на панели навигации, используя HTML и CSS; нет JavaScript или каркасов. Я добавил псевдокласс :hover в свой css, чтобы отображать содержимое меню с помощью display: block. Когда пользователь наводит курсор на меню btn, содержимое отображается под ним. Отлично работает на рабочем столе. Мне нужен тот же эффект на устройстве с сенсорным экраном, только теперь пользователь будет нажимать ссылку меню, чтобы отобразить содержимое ниже, и когда пользователь коснется любого другого места на своем экране, он отклонит его. В настоящее время пользователь может нажать на меню btn, и оно отобразит контент, но нет возможности его закрыть. Может ли это быть достигнуто в CSS или Javascript единственный способ получить go здесь? Если JS, нужно ли мне удалить CSS :hover, чтобы функция JS работала правильно? Кажется, я не могу найти подходящую статью или руководство, чтобы помочь мне понять.
Вот мой HTML
<div class="nav__menus">
<button class="btn btn__nav" id="menu">Menus<i class="fa fa-caret-down"></i></button>
<div class="menu-dropdown-content">
<a target="_blank" href="documents/Food.pdf">Food</a>
<a target="_blank" href="documents/BeerandWine.pdf">Beer and Wine</a>
<a target="_blank" href="documents/Appetizers.pdf">Appetizers</a>
</div>
</div>
Вот мой CSS
.menu-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
border-radius: 0 0 4px 4px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-dropdown-content a {
float: none;
color: var(--primary-black);
padding: 10px;
text-decoration: none;
display: block;
text-align: left;
}
.nav__menus:hover .menu-dropdown-content {
display: block;
margin: 0 24px;
}
И для ясности, я хотел бы, чтобы пользователь мог нажать в любом месте экрана, чтобы закрыть раскрывающийся список.