Блог

Главная - Вопросы по программированию - Ошибка открытия и закрытия навигации

Ошибка открытия и закрытия навигации

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня небольшая ошибка, когда я нажимаю на ссылку, чтобы открыть дочерние элементы, она закрывает весь элемент, пожалуйста, посмотрите Gif: введите описание изображения здесь

Это мой JS-код :

 $('.menu-item-has-children > a').on('click', function(e){
  e.preventDefault();
    var EltToToggle = $(this).next('.sub-menu');
   $(".sub-menu .sub-menu").not(EltToToggle).hide();

  EltToToggle.fadeToggle();
});

Это мой html :

 <li id="menu-item-1555" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1555"><a href="#" aria-expanded="false" class="">Nos métiers :  Fonctions support</a>
  <ul class="sub-menu">
    <li id="menu-item-1673" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1673"><a href="#">Test insertion shortcode tableau RWD – Alex</a></li>
    <li id="menu-item-1600" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1600 menu-item-has-children">
        <a href="#collapseExample3" aria-expanded="false" class="">testu</a>

        <ul class="sub-menu">
            <li id="menu-item-1656" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1656">
                <a href="#">Test de tableau – page – style 3 Empilement Stacking</a>
            </li>

        </ul>
    </li>
</ul>

Комментарии:

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

2. К сожалению, я не могу коснуться html-кода, он был сгенерирован CMS: (

3. я сделал это $(".sub-menu .sub-menu").not(EltToToggle).hide(); , но когда я нажимаю на другую ссылку, чтобы открыть элементы, она не закрывает первую. Пожалуйста, посмотрите мой пост, я отредактировал Gif

Ответ №1:

вы можете просто сделать

javascript

 $('.btnForExpanding').click(() => {

    $('ul.sub-menu').fadeToggle();

})

и HTML

 <li id="menu-item-1555" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1555"><a href="#" aria-expanded="false" class="">Nos métiers :  Fonctions support</a>
  <ul class="sub-menu">
    <li id="menu-item-1673" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1673"><a href="#">Test insertion shortcode tableau RWD – Alex</a></li>
    <li id="menu-item-1600" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1600 menu-item-has-children">
        <a href="#collapseExample3" aria-expanded="false" class="btnForExpanding">testu</a>

        <ul class="sub-menu collapse" id="collapseExample3" aria-labelledby="headingThree" data-parent="#menu-secondary-menu">
            <li id="menu-item-1656" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1656">
                <a href="#">Test de tableau – page – style 3 Empilement Stacking</a>
            </li>

        </ul>
    </li>
</ul>

Комментарии:

1. он скрывает <a href="#collapseExample3" aria-expanded="false" class="btnForExpanding">testu</a> слишком с dispaly:none

2. Как я могу закрыть другие <ul class="sub-menu"> одновременно, пожалуйста

3. любая помощь, пожалуйста?

Метки: