防止子元素在子菜单项单击时触发父事件

Question

I'm trying to create a sidebar menu which triggers a submenu on parent click - this all works well, however, when I click on a child item/submenu item, the parent class collapses.

I have tried to use e.stopPropogation(); but this didn't seem to work. Please see code below.

 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>

Answer 1

You need to use stopPropagation for the .submenu click instead of the parent click.

 $(document).on('click', '.item', function(e) { $(this).find('.submenu').toggleClass('submenu-active'); }).on('click', '.submenu', function(e) { e.stopPropagation(); });

 * { 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; position: relative; z-index: 10; }.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>