Запретить дочернему элементу запускать родительское событие при щелчке элемента подменю - PullRequest
1 голос
/ 26 октября 2019

Я пытаюсь создать боковое меню, которое вызывает подменю при щелчке по родительскому элементу - все это работает хорошо, однако, когда я щелкаю по дочернему элементу / элементу подменю, родительский класс разрушается.

Я пытался использовать 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>

1 Ответ

1 голос
/ 26 октября 2019

Вам нужно использовать stopPropagation для клика .submenu вместо родительского клика.

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...