Я пытаюсь создать боковое меню, которое вызывает подменю при щелчке по родительскому элементу - все это работает хорошо, однако, когда я щелкаю по дочернему элементу / элементу подменю, родительский класс разрушается.
Я пытался использовать e.stopPropogation();
, но это не помогло. Пожалуйста, смотрите код ниже.
var menu = document.getElementById('menu');
document.querySelectorAll('.item').forEach((i) => {
i.addEventListener('click', (ev) => {
ev.stopPropagation();
ev.preventDefault();
i.querySelector('.submenu').classList.toggle('submenu-active');
});
});
* {
margin: 0;
padding: 0;
}
.logo {
z-index: 0;
}
#navigation {
position: relative;
}
#menu {
background-color: #fff;
width: 90%;
position: fixed;
z-index: 1;
transition: 0.25s;
top: 0;
height: 100%;
overflow-y: scroll;
-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
}
#menu .item {
list-style: none;
padding: .6rem .8rem;
background-color: blue;
color: #fff;
border-bottom: 1px solid #fff;
}
.submenu {
display: none;
background-color: darkblue;
padding: none;
}
.submenu li {
list-style: none;
}
.menu-active {
transition: 0.5s;
left: 0 !important;
}
.submenu-active {
display: block;
}
<header>
<div class="container">
<nav id="navigation">
<div class="envisage"></div>
<ul id="menu">
<li class="item">Item 1
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 2
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 3
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 4
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 5
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
</ul>
<button id="menu-btn">
<span>Menu</span>
</button>
</nav>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>