исправить код, чтобы предотвратить закрытие выпадающего меню при нажатии - PullRequest
Новая
       1

исправить код, чтобы предотвратить закрытие выпадающего меню при нажатии

0 голосов
/ 08 февраля 2020

Я получил код от w3scgool и изменил его. Раскрывающееся меню открывается, но когда я щелкаю внутри него - подменю, оно закрывается. Вот чистый код JavaScript. 

var dropdown = document.getElementsByClassName('dropdown-btn');
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener('click', function() {
    this.classList.toggle('active');
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === 'block') {

      dropdownContent.style.display = 'none';
    } else {

      dropdownContent.style.display = 'block';
    }
  });
}
nav.side-nav {
  order: 0;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-self: stretch;
  margin-bottom: 0.67rem;
}

nav.side-nav ul {
  margin: 0;
}

nav.side-nav li {
  border-bottom: 1px solid #d9dadc;
  border-left: 1px solid #d9dadc;
  border-right: 1px solid #d9dadc;
  list-style: none;
  padding: 5px 15px;
  font-size: 17px;
  line-height: 24px;
}

nav.side-nav li:first-child {
  background: #092a31;
  color: white;
  border: none;
  font-size: 20px;
  padding: 15px;
  line-height: 1.1;
}

nav.side-nav li:not(:first-child):hover {
  background: #cda600;
  color: white;
  cursor: pointer;
}


/*dropdown menu*/

.dropdown-container {
  display: none;
  background-color: #ffffff;
  padding-left: 8px;
}
<html>
<nav class="side-nav">
  <ul>

    <li style="text-align:left;">some1</li>
    <li href="#">some1</li>
    <li href="#">some1</li>
    <li href="#">some1</li>

    <li id="navDrop" class="dropdown-btn">
      <a href="#">Menu</a></li>
    <div class="dropdown-container">
      <form>
        <a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br>

        <a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br>

        <a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br>

        <a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>
      </form>
    </div>

    <li href="#">Menu</li>
  </ul>
</nav>

</html>

Я новичок в JS. Может ли кто-нибудь перейти / показать, как редактировать код, чтобы предотвратить закрытие выпадающего меню при нажатии на его подменю. Обновление: убрал функцию onclick. Взял из моего кода тоже. Любые предложения по поводу кода, потому что он остается прежним. В этом случае я использую только JS без jquery библиотеки.

1 Ответ

0 голосов
/ 08 февраля 2020

После внесения изменений, предложенных @ Hereti c Monkey и @ Gane sh chaitanya, вы можете упростить свой код, используя map () вместо a для l oop, и снова classList.toggle () вместо иначе если. просто немного измените ваш css с помощью нового класса, который вы добавляете в свой div. Вот так 

    var dropdown = document.getElementsByClassName("dropdown-btn");
    // here dropdown.map() don't work, use 
    Array.prototype.map.call(dropdown, function(drop) {
      drop.addEventListener("click", function() {
        drop.classList.toggle("active");
        var dropdownContent = drop.nextElementSibling;
        //use classList.toggle with the new class added at the div
        dropdownContent.classList.toggle("disp-container");
      });
    });
nav.side-nav li:not(:first-child):hover {
      background: #cda600;
      color: white;
      cursor: pointer;
    }
    
    /*dropdown menu*/
    
    /*remove display here*/
    .dropdown-container {
      background-color: #ffffff;
      padding-left: 8px;
    }
    /*create a new class and add display here*/
    .disp-container {
      display: none;
    }
        <nav class="side-nav">
          <ul>
            <li style="text-align:left;">some1</li>
            <li href="#">some1</li>
            <li href="#">some1</li>
            <li href="#">some1</li>
    
            <li id="navDrop" class="dropdown-btn">
              <a href="#">Menu</a>
            </li>
            <!-- add your new class here -->
            <div class="disp-container dropdown-container">
              <form>
                <a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br />
                <a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br />
                <a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br />
                <a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>
              </form>
            </div>
            <li id="navDrop2" class="dropdown-btn">
              <a href="#">Menu</a>
            </li>
             <!-- add your new class here -->
            <div class="disp-container dropdown-container">
              <form>
                <a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br />
                <a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br />
                <a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br />
                <a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>
              </form>
            </div>
          </ul>
        </nav>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...