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

Question

У меня проблема с моим мобильным меню и подменю.

В мобильном представлении, при нажатии на ссылку верхнего уровня, моё подменю открывается, чтобы показать под-ссылки, но теперь под-под-ссылки не работают, и ссылка верхнего уровня не работает (она не идет по ее URL-адресу).

К сожалению, я не могу вручную перезаписать структуру меню HTML, поэтому я попытался добавить ссылку каретки (используя JQuery)чтобы появилось подменю при нажатии каретки.Но это не сработало.Может быть, я мог бы добавить или добавить ссылку на кнопку (с JQuery) слева от пункта меню верхнего уровня (li), чтобы сделать ее кнопкой или кареткой, которая переключает подменю, в то же время позволяя ссылке верхнего уровня перейти на свой URL,Надеюсь, это все хорошо объясняет.Я ценю любую помощь.Спасибо.

/ HTML /

<#nav id="nav">
    <li id="menu-item-8000" class="menu-item menu-item-has-children menu-item-8000"><a href="https://website.com/home/visit/" class="open-submenu">Visit</a>
      <ul class="sub-menu" style="display: block;">
        <li id="menu-item-7891" class="menu-item menu-item-7891"><a href="https://website.com/home/visit/sublink-one/" class="open-submenu">Visit Sublink One</a></li>
        <li id="menu-item-7892" class="menu-item menu-item-7892"><a href="https://website.com/home/visit/sublink-two/" class="open-submenu">Visit Sublink Two</a></li>
        <li id="menu-item-7893" class="menu-item menu-item-7893"><a href="https://website.com/home/visit/sublink-three/" class="open-submenu">Visit Sublink Three</a></li>
      </ul>
</li>
<li id="menu-item-8001" class="menu-item menu-item-has-children menu-item-8000"><a href="https://website.com/home/events/" class="open-submenu">Events</a>
      <ul class="sub-menu" style="display: block;">
        <li id="menu-item-7894" class="menu-item menu-item-7891"><a href="https://website.com/home/events/sublink-one/" class="open-submenu">Events Sublink One</a></li>
        <li id="menu-item-7895" class="menu-item menu-item-7892"><a href="https://website.com/home/events/sublink-two/" class="open-submenu">Events Sublink Two</a></li>
        <li id="menu-item-7896" class="menu-item menu-item-7893"><a href="https://website.com/home/events/sublink-three/" class="open-submenu">Events Sublink Three</a></li>
   </ul>
  </li>
</nav>

/ JQuery /

//Add caret to top level mobile menu item
  $(document).ready(function () {
    if ($(window).width() < 960) {
  $('#nav li>:not(ul)').addClass('open-submenu');
    }
 });

/* This is used to show the sub-nav on mobile */
$(function(){
   $('.open-submenu').on('click', function(e){
       if(Modernizr.mq('screen and (max-width:767px)')) {
        e.preventDefault();
        $(this).next($('.sub-menu')).slideToggle();
       }
   })

});

Answer 1

Я решил проблему с подменю множеством проб и ошибок.Решение было довольно простым, но я давно не писал код JQuery.Я надеюсь, что это поможет кому-то еще с подобной проблемой кода:

/** HTML **/
<ul>
  <li><a href="http://website-page-1.com">Top Level Link</a>
   <!-- Insert button here to toggle submenu -->
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
</li>
<li><a href="http://website-page-2.com">Top Level Link</a>
   <!-- Insert button here to toggle submenu -->
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
  </li>
</ul>

/** JQuery **/
//Add button to all top level links that have a submenu
  $(document).ready(function () {
   if ($(window).width() < 960) {
  $('.sub-menu').before($('<button class="submenu-button"></button>'));

  $('.sub-menu').hide();

  $('.submenu-button').click(function () {
    $(this).next('.sub-menu').slideToggle();
   });
  }
});

/ ** CSS ** /

.submenu-button {
   width: 60px;
   height: 54px;
   background-color: transparent;
   border: 0;
   text-align: center;
   position: absolute;
   right: 0;
   z-index: 9999;
   font-weight: 700;
}

.submenu-button:after {
    color: #fff;
    content: ' ▾';
    display: flex;
    justify-content: center;
  }

}

Answer 2

Если я правильно понимаю

$(function() {

    var isNotMobile = $(window).width() > 786;

    $('.menu-item').each(function() {

        var item = $(this);
        var button = $('.open-submenu', item);
        var subMenu = $('.sub-menu', item);

        button.on('click', function(event) {
            if (isNotMobile) return true;
            event.preventDefault();
            subMenu.slideToogle();
            return false;
        });

    });
});