Как переключить подменю с jQuery при нажатии на родительский - PullRequest
Новая
       4

Как переключить подменю с jQuery при нажатии на родительский

2 голосов
/ 18 января 2020

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

Любая помощь будет принята с благодарностью. Спасибо!

Jquery: 

$("li.menu-item-has-children .toggle").click(function(e){
  e.preventDefault();
  $(this).next('.submenu').toggle();

});

HTML

<nav class="navigation">
                <ul class="menu nav-menu">
                  <li class="menu-item menu-item-has-children"><a href="#" class="menu-link main-menu-link">Logo
                    <span class="toggle">
                  <i class="fas fa-chevron-right"></i>
                    </span>

                  </a>
                  <ul class="submenu">
                    <li>sub list</li>
                  </ul>




                </li>
                  <li class="menu-item menu-item-has-children"><a href="#" class="menu-link main-menu-link">Fonts
                    <span class="toggle">
                  <i class="fas fa-chevron-right"></i>
                    </span>
                  </a></li>
                </ul>
              </nav>

CSS: 

.nav-menu li.menu-item-has-children {
    position: relative;
}
.nav-menu li a{
  color: #0a0a0a;
    display: block;
    font-weight: 400;

    position: relative;
    padding: 10px 40px 10px 20px;
    font-size: .875rem;
    line-height: 1.25rem;

}
.nav-menu li.menu-item-has-children .toggle {
  position:absolute;
  right:0;
  transition: transform 400ms cubic-bezier(1,0,1,1),-webkit-transform 400ms cubic-bezier(1,0,1,1),-o-transform 400ms cubic-bezier(1,0,1,1);
}
 .submenu{
  display:none;
}

1 Ответ

0 голосов
/ 18 января 2020

Пожалуйста, измените ваш скрипт на этот 

$("li.menu-item-has-children").click(function(e){
    e.preventDefault();
    $(this).find('.submenu').toggle();
});
...