मैं एक साइडबार मेनू बनाने की कोशिश कर रहा हूं जो पैरेंट क्लिक पर सबमेनू ट्रिगर करता है - यह सब अच्छी तरह से काम करता है, हालांकि, जब मैं किसी चाइल्ड आइटम/सबमेनू आइटम पर क्लिक करता हूं, तो पैरेंट क्लास ढह जाती है।

मैंने 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
user5561715 26 अक्टूबर 2019, 12:35

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>
1
Nidhin Joseph 26 अक्टूबर 2019, 09:49