Подменю не работает, поскольку я хочу

У меня проблема с моим подменю. Подменю реагирует на щелчок, но у меня есть проблема, что я нажимаю на подменю <li>, содержимое удаляется, и я не хочу этого. И есть ли какая-то ошибка с этим, он пишет эту ошибку «Uncaught TypeError: Невозможно прочитать свойство« classList »из / * Добавлен класс .main в parent <ul> || Добавив eventListener в родительский элемент || для нескольких кликабельных узлов | | и используя свойство e.target, чтобы найти || точный узел, на самом деле щелкнутый, нам нужно просто <ul> для прослушивания || вместо трех отдельных <li> || Это часть события Delagation * / var main = документ . querySelector ( ».main' ); главный . addEventListener ( 'нажмите' , аккордеон , ложь ); function accordion ( e ) { // Остановить <a> от прыжка e . preventDefault (); / * Собрать все .dropdown-menu в NodeList || затем скрывает его до массива * / var dropArray = Array . из ( документ . querySelectorAll ( '.dropdown-меню' )); / * если щелкнутый узел (e.target) НЕ является || узел, прослушивающий событие (e.currentTarget || ul.main), затем ... * / if ( e . target ! == e . currentTarget ) { / * Назначить e.target для var || Найти tgr next sibling (.dropdown-menu) || Итерация через dropArray wth a || для ... цикла || Удалить .show и добавить .hide на || каждое .dropdown-menu в dropArray || Затем добавьте .show и удалите .hide || на tgt || Наконец, остановите событие click от || пузыря, тем самым предотвращая что-либо || иначе от срабатывания. * / var tgr = e . цель ; вар TGT = TGR . nextElementSibling ; для ( пусть падение dropArray ) { drop . classList . remove ( 'show' ); падение . classList . add ( 'hide' ); } tgt . classList . add ( 'show' ); tgt . classList . remove ( 'hide' ); } e . stopPropagation (); } ".

Может мне помочь?

ul {
  list-style: none
}

.dropdown a {
  text-decoration: none;
}

.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: black;
  padding: 10px;
}

.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
}

.dropdown .dropdown-menu li {
  padding: 0;
}

.dropdown .dropdown-menu li a {
  display: block;
  padding: 10px 10px;
}

.dropdown .show {
  display: block;
  max-height: 9999px;
  margin-left: 50px;
}

.dropdown .hide {
  max-height: 0;
}
<div class="container">
  <ul class='main'>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">First Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Second Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Third Menu </a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</div>
function accordion(e) {
  e.preventDefault();    
  if (e.target.tagName === 'A' && e.target !== e.currentTarget) { 
    var dropArray = Array.from(document.querySelectorAll('.dropdown-menu'));
    var tgt = e.target.nextElementSibling;
    if(tgt) {
      for (let drop of dropArray) {
        drop.classList.remove('show');
      }
      tgt.classList.add('show');
      tgt.classList.remove('hide');
    }
  }
  e.stopPropagation();
}

javascript,html,css,

0

Ответов: 2

0 принят

Если вы не хотите, чтобы подменю было закрыто после подбора элемента:

null

Это также исправляет ошибку «Can not read property» classList «null».

1

Это потому, что «tgt» заканчивается тем, что nullвы нажимаете на листья. Вы должны проверить это, чтобы избежать ошибки:

if (tgt) {
    for (let drop of dropArray) {
      drop.classList.remove('show');
      drop.classList.add('hide');
    }
    tgt.classList.add('show');
    tgt.classList.remove('hide');
}
JavaScript, HTML, CSS,
Похожие вопросы
Яндекс.Метрика