我正在try 在这个页面上创建一个开放/colapse元素.我使用#wrapper::before覆盖屏幕,它还有一个eventlistner来关闭显示的元素.我在包装器eventListner上使用{capture:true}将其打开并关闭,但当我单击搜索栏键入内容时,它还是关闭了.
我怎样才能使它不被任何点击而关闭?就在包装纸上
const responsiveIcons = document.querySelectorAll('.mininav>*');
const wrapper = document.querySelector('#wrapper');
const mainNav = document.querySelector('aside');
const searchBar = document.querySelector('form#search');
function openItem(e){
e.classList.add('show');
wrapper.classList.add('show');
}
function closeItems(){
switch(true){
case mainNav.classList.contains('show'):
mainNav.classList.remove('show');
break;
case searchBar.classList.contains('show'):
searchBar.classList.remove('show');
break;
}
wrapper.classList.remove('show');
}
function showSelector(e){
const eClass = e.target.classList;
switch(true){
case eClass.contains('nav'):
openItem(mainNav);
break;
case eClass.contains('searchbar'):
openItem(searchBar);
break;
}
// if(e.target.classList.contains('nav')){
// openItem(mainNav);
// } else if{}
}
wrapper.addEventListener('click', closeItems, {capture: true});
responsiveIcons.forEach(e => e.addEventListener('click', showSelector));
:root {
--font-family: "Ubuntu", sans-serif;
--font-size: 16px;
--title-color: rgb(58, 58, 58);
--background-color: white;
--bgHeader: #003459;
--bgSearchBar: #002a45;
--headers: #003459;
--bgMain: #EBF9FF;
--textColor: #00171F;
--cardGreen: rgba(157, 255, 0, 1);
--cardBlue: rgba(0, 174, 255, 1);
--cardRed: rgba(255, 42, 42, 1);
--cardYellow: rgba(255, 251, 0, 1);
--headerMargin: .5rem 0;
--box-shadow: 0 1rem 1rem -0.75rem rgb(105 96 215 / 18%);
--wrap-first-column: 14rem;
--nav-txt-color: #5c5c5c;
}
#wrapper {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content 1fr;
background-color: var(--bgMain);
min-height: 100%;
}
#wrapper.show::before {
content: "";
position: fixed;
background-color: black;
opacity: 0.5;
z-index: 2;
width: 100%;
height: 100%;
}
header {
grid-column: span 2;
column-span: all;
background: var(--bgHeader);
justify-content: space-between;
}
.brand {
height: fit-content;
width: 12.5rem;
align-items: center;
margin: var(--headerMargin);
}
header > div + div {
height: fit-content;
width: auto;
align-items: center;
margin: var(--headerMargin);
margin: auto 0.5rem;
}
.mininav {
color: white;
width: max-content;
display: inline-block;
flex-direction: row;
flex-wrap: nowrap;
}
aside.show {
left: 0;
}
aside {
inset: 0 auto;
position: absolute;
top: 0;
left: calc(var(--wrap-first-column) * -1);
}
main {
width: inherit;
}
form#search.show {
top: 0.5rem;
}
form#search {
position: absolute;
top: -2.5rem;
left: 0;
width: 100%;
transition: top 0.15s ease-out;
}
form#search > div {
position: relative;
margin-left: 10px;
}
<div id="wrapper">
<!-- Full container grid -->
<header class="flex">
<div class="brand flex">
<img src="./images/logo-cp-admin.png" alt="" class="">
</div>
<div class="flex">
<!-- search bar -->
<form id="search" action="#" method="get">
<div class=" align-top">
<input id="searchbar" type="search" placeholder=" "
class="text-xs focus:outline-none bg-bgSearchBar/[.0] focus:bg-bgSearchBar/50 text-white p-1.5 pl-3 pr-6 my-0.5 rounded-xl">
<label for="searchbar">Busca...</label>
<span class="mdi mdi-magnify"></span>
</div>
</form>
</div>
<!-- mobile responsive -->
<div class="mininav flex" >
<label class="searchbar mdi mdi-magnify">MAGNIFY</label>
<label class="nav mdi mdi-menu">HAM-MENU
</div>
</header>
<div class="flex col-span2">
<!-- side content (menu & widgets)-->
<aside>
side
</aside>
<main>
main
</main>
</div>