javascript - 移动设备上的多级手风琴导航

Question

我是 Jquery 开发的新手，我正在创建一个基于 HTML 结构的手风琴菜单，但手风琴仅适用于 1 级导航，不适用于所有导航。

<div id="hs_menu_wrapper_module_xxxxxxxxxxxxxx_" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" role="navigation" data-sitemap-name="default" data-menu-id="44326912014" aria-label="Navigation Menu" style="display: block;">
 <ul>
  <li class="hs-menu-item hs-menu-depth-1"><a href="javascript:;" role="menuitem">Menu item </a></li>
  <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="menu"><a href="javascript:;" aria-haspopup="true" aria-expanded="false" role="menuitem">Menu item </a> <div class="child-trigger"><i></i></div>
   <ul class="hs-menu-children-wrapper" style="">
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
   </ul></li>
  <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="menu"><a href="javascript:;" aria-haspopup="true" aria-expanded="false" role="menuitem">Our Services</a> <div class="child-trigger"><i></i></div>
   <ul class="hs-menu-children-wrapper" style="">
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a> <div class="child-trigger"><i></i></div>
     <ul class="hs-menu-children-wrapper" style="">
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
     </ul></li>
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a> <div class="child-trigger"><i></i></div>Menu item Menu item 
     <ul class="hs-menu-children-wrapper" style="">
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
     </ul></li>
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a> <div class="child-trigger"><i></i></div>
     <ul class="hs-menu-children-wrapper" style="">
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
     </ul></li>
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a> <div class="child-trigger"><i></i></div>
     <ul class="hs-menu-children-wrapper" style="">
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a></li>
     </ul></li>
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">Menu item Menu item </a> <div class="child-trigger"><i></i></div>
     <ul class="hs-menu-children-wrapper" style="">
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
     </ul></li>
    <li class="hs-menu-item hs-menu-depth-2 hs-item-has-children" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a> <div class="child-trigger"><i></i></div>
     <ul class="hs-menu-children-wrapper" style="">
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
      <li class="hs-menu-item hs-menu-depth-3" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
     </ul></li>
   </ul></li>
  <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="menu"><a href="javascript:;" aria-haspopup="true" aria-expanded="false" role="menuitem">Resources</a> <div class="child-trigger"><i></i></div>
   <ul class="hs-menu-children-wrapper" style="">
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
   </ul></li>
  <li class="hs-menu-item hs-menu-depth-1"><a href="javascript:;" role="menuitem">Menu item </a></li>
  <li class="hs-menu-item hs-menu-depth-1"><a href="javascript:;" role="menuitem">Menu item </a></li>
  <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="menu"><a href="javascript:;" aria-haspopup="true" aria-expanded="false" role="menuitem">Menu item </a> <div class="child-trigger"><i></i></div>
   <ul class="hs-menu-children-wrapper" style="">
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
    <li class="hs-menu-item hs-menu-depth-2" role="menuitem"><a href="javascript:;" role="menuitem">Menu item </a></li>
   </ul></li>
 </ul>
</div>

这是导航的 HTML，以及手机上手风琴导航的默认 Jquery 脚本

$('.custom-menu-primary').addClass('js-enabled');

/* Mobile button with three lines icon */
    $('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger"><i></i></div>');
    
/* Uncomment for mobile button that says 'MENU' 
    $('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger">MENU</div>');
*/

$('.custom-menu-primary .flyouts .hs-item-has-children > a').after(' <div class="child-trigger"><i></i></div>');   
$('.mobile-trigger').click(function() {
    $(this).next('.custom-menu-primary .hs-menu-wrapper').slideToggle(250);
    $('body').toggleClass('mobile-open');
    $('.child-trigger').removeClass('child-open');
    $('.hs-menu-children-wrapper').slideUp(250);
    return false;
 });

$('.child-trigger').click(function() {
    $(this).parent().siblings('.hs-item-has-children').find('.child-trigger').removeClass('child-open');
    $(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
    $(this).next('.hs-menu-children-wrapper').slideToggle(250);
    $(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
    $(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.child-trigger').removeClass('child-open');
    $(this).toggleClass('child-open');
    return false;
});

但这也无法正常工作，因为加号图标仅在单击 1 级导航项时才起作用，那么只有它会打开也正在双击的手风琴。

标签： javascriptjqueryjquery-uijquery-mobilehubspot