Аккордеон на гамбургере (дочерние ссылки не отображаются) - PullRequest
Новая
       37

Аккордеон на гамбургере (дочерние ссылки не отображаются)

0 голосов
/ 31 октября 2019

Я пытаюсь создать аккордеон, который при клике будет отображать его дочерние ссылки.

Итак, в моей демонстрации ниже, при нажатии parent, я пытаюсь отобразить child. 

$(function() {

  // add icon on hamburger
  $(".hs-item-has-children").append('<i></i>');
  $(".hs-menu-children-wrapper").addClass('menu_hidden');


  // on click, check if dropdown is down already
  $(".hs-item-has-children").click(function() {

    //$('.hs-menu-children-wrapper').toggleClass('menu_is_visibile');
    if ($(".hs-menu-children-wrapper").hasClass('menu_hidden'))
      $(".hs-menu-children-wrapper").removeClass('menu_hidden');
      $(".hs-menu-children-wrapper").addClass('menu_is_visibile');
  });
});
.menu li.hs-item-has-children i {
  display: block;
  position: absolute;
  margin-top: 16px;
  right: 50px;
  margin-top: -28px;
}

.menu li.hs-item-has-children i {
  display: block;
}


.menu li.hs-item-has-children i:before,
.menu li.hs-item-has-children i:after {
  content: "";
  position: absolute;
  background-color: #ff6873;
  width: 3px;
  height: 9px;
}

.menu li.hs-item-has-children i:before {
  transform: translate(-2px, 0) rotate(45deg);
}

.menu li.hs-item-has-children i:after {
  transform: translate(2px, 0) rotate(-45deg);
}

.menu li.hs-item-has-children ul.hs-menu-children-wrapper.menu_hidden {
  display: none !important;
}

.menu li.hs-item-has-children ul.hs-menu-children-wrapper.menu_is_visibile {
  display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <ul>
  
    <li class="hs-item-has-children" role="menu"><a href="javascript:void(0)">Parent</a>
      <ul class="hs-menu-children-wrapper menu_hidden">
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
      </ul>
    </li>
    
    <li class="hs-item-has-children" role="menu"><a href="javascript:void(0)">Parent 2</a>
      <ul class="hs-menu-children-wrapper menu_hidden">
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
      </ul>
    </li>
    
  </ul>
</div>

Это также меню HubSpot, поэтому нельзя слишком сильно изменять разметку (поэтому я использую .append())

Редактировать:

Попытка сделать так, чтобы только выбранные родительские ссылки показывали дочернюю ссылку. Т.е. если я нажму Parent 2 в демонстрационном примере выше, отобразятся только дочерние ссылки для этого ul (в настоящее время оба открыты).

1 Ответ

1 голос
/ 31 октября 2019

Измените свою функцию на: 

  $(".hs-item-has-children").click(function() {
  $(this).children('.hs-menu-children-wrapper').toggleClass('menu_is_visibile');
  });

Jsfiddle: https://jsfiddle.net/ukowjqav/1/

Вместо использования if-else вы можете переключать сам класс для просмотра дочерних элементов каждого родителя. Также обратите внимание, что я использую this в функции. Таким образом, код знает, на какой конкретный элемент он ссылается. Надеюсь, это поможет.

...