Закройте выпадающее меню, дважды щелкнув по нему - PullRequest
Новая
       37

Закройте выпадающее меню, дважды щелкнув по нему

0 голосов
/ 18 марта 2020



У меня есть вертикальное меню с выпадающим списком. На самом деле больше раскрывающихся списков нельзя открыть одновременно, и, если раскрывающийся список открыт, когда я нажимаю на другую раскрывающуюся кнопку, раскрывающийся список закрывается сам.
Здесь вы можете увидеть демонстрацию .

Проблема в том, что теперь, если дважды щелкнуть одну и ту же кнопку раскрывающегося меню, при первом открытии раскрывающегося окна (как и должно быть) откроется само окно, , но второй раз раскрывающийся список не закрывает сам, как я хочу.
Кроме того, также, когда раскрывающийся список открыт и я нажимаю на другую кнопку в меню, раскрывающийся список не закрывается сам по себе.
Здесь вы можете увидеть мой код: 

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <button class="dropdown-btn">Dropdown 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <button class="dropdown-btn">Dropdown 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#contact">Search</a>
</div>

var accItem = document.getElementsByClassName('dropdown-container');
    var accHD = document.getElementsByClassName('dropdown-btn');
    for (i = 0; i < accHD.length; i++) {
        accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {

        var itemClass = this.nextElementSibling;
        for (i = 0; i < accItem.length; i++) {
                accItem[i].style.display = "none";
            accHD[i].classList.remove("active");
        }
        if (itemClass.style.display === "none") {
                this.classList.add("active");
            //this.classList.toggle("active");
            this.nextElementSibling.style.display = "block";
        }

    }

Кто-то может найти, где проблема и решить ее?
Спасибо, с уважением

(Надеюсь, понятно, если нет, дайте мне знать в комментариях. Я не очень хорошо говорю по-английски sh.)

1 Ответ

1 голос
/ 18 марта 2020

Над вашим для l oop попробуйте добавить: 

if (itemClass.style.display === "block") {
    this.nextElementSibling.style.display = "none";
    this.classList.remove("active");
    return;
}

Это позволит проверить, открыт ли выбранный элемент, и обработать все ваши значения. Добавление возврата предотвращает выполнение остальной части кода.

Вот скрипка с вашим кодом и ответ на другой вопрос о закрытии их по нажатию одной из основных ссылок:

скрипка

...