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

Question

我正在尝试创建一个侧边栏菜单，它会在父级单击时触发子菜单 - 这一切都很好，但是，当我单击子项/子菜单项时，父类会崩溃。

我尝试过使用 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>

Answer 1

您需要为 .submenu 点击而不是父点击使用 stopPropagation。

$(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>