javascript - 巨型菜单的 anchor 标记在 html 的移动版本中不起作用

Question

我的 laravel 网站中有一个 megamenu 。所有菜单链接在网站的桌面版本中都可以正常工作。

但在移动版本中， anchor 标记链接不起作用。

HTML

<div class="menu-container">
<div class="menu">
  <ul>
    <li><a class="nav-item nav-link" href="{{ url('/') }}">Home</a></li>
    <li><a class="nav-item nav-link" href="{{ url('/clinic') }}">Clinic </a>             
       <ul>
        @foreach($_SESSION['clinic'] as $data)
          @foreach($_SESSION['all_clinic_with_services'] as $key=>$datum)
            @if($key === $data->id)
              <li><a href="{{ url('/clinic/'.str_slug($data->name, "-").'-'.$data->id ) }}">{{ $data->name }}</a>
                <ul>
                  @foreach($datum as $value)
                    <li><a href="#">{{ $value->name }}</a></li>
                  @endforeach
                </ul>
              </li>                    

            @else
              @continue;

            @endif

          @endforeach
        @endforeach

        @foreach($_SESSION['all_clinic_without_services'] as $data)
          <li><a href="{{ url('/clinic') }}">{{ $data->name }}</a>
        @endforeach
      </ul>
    </li>
    <li><a class="nav-item nav-link" href="{{ url('/technology') }}">Technology</a></li>
    <li><a class="nav-item nav-link" href="{{ url('/photo-gallery') }}">Photo Gallery</a></li>
    <li><a class="nav-item nav-link" href="{{ url('/price-list') }}">Price List</a></li>
    <li><a class="nav-item nav-link" href="{{ url('/video') }}">Videos</a></li>
    <li><a class="nav-item nav-link" href="{{ url('/about-us') }}">About Us</a>
      <ul>
        <li><a href="{{ url('/message-from-MD') }}">Messaging from Managing Director</a></li>
        <li><a href="{{ url('/about-us') }}">About Laser Medical Center</a></li>
        <li><a href="{{ url('/medical-consultant') }}">Medical Consultant</a></li>
        <li><a href="{{ url('/medical-officer') }}">Medical Offficer</a></li>
        <li><a href="{{ url('/nutritionist') }}">Clinical Nutritionist</a></li>
        <li><a href="{{ url('/physiotherapist') }}">Physiotherapist</a></li>
        <li><a href="{{ url('/nurse') }}">Senior Staff Nurse</a></li>
        <li><a href="{{ url('/customer-service') }}">Customer Service</a></li>
      </ul>
    </li>
    <li><a class="nav-item nav-link" href="{{ url('/contact-us') }}">Contact Us</a></li>
  </ul>
</div>

脚本

/*global $ */
$(document).ready(function () {

"use strict";

$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
//Checks if li has sub (ul) and adds class for toggle icon - just an UI


$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
//Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

$(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");

//Adds menu-mobile class (for mobile toggle menu) before the normal menu
//Mobile menu is hidden if width is more then 959px, but normal menu is displayed
//Normal menu is hidden if width is below 959px, and jquery adds mobile menu
//Done this way so it can be used with wordpress without any trouble

$(".menu > ul > li").hover(function (e) {
    if ($(window).width() > 943) {
        $(this).children("ul").stop(true, false).fadeToggle(150);
        e.preventDefault();
    }
});
//If width is more than 943px dropdowns are displayed on hover

$(".menu > ul > li").click(function (e) {
    if ($(window).width() <= 943) {
        $(this).children("ul").fadeToggle(150);
        e.preventDefault();
    }
});
//If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)

$(".menu-mobile").click(function (e) {
    $(".menu > ul").toggleClass('show-on-mobile');
    e.preventDefault();
});
//when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
});

是脚本相关的问题吗？

哪里可以更改？请有人帮助我吗？

我之前已经在 stackoverflow 上发布过这个问题，但没有得到答案。这就是为什么再次重新发布该问题。请帮忙。

Answer 1

因为e.preventDefault() 。

您可以在下面的示例中看到第一个 li有event.preventDefault()所以点击里面的链接什么也不做，第二个有效。

这种情况仅发生在移动设备上，因为只有在移动设备 ( if ($(window).width() <= 943) { ) 上您才能调用 preventDefault上click .

<script src="https://code.jquery.com/jquery-git.js"></script>
<ul>
  <li class="click-not-working"><a target="_blank" href="https://google.com">Click is not working</a></li>
  <li><a target="_blank" href="https://google.com">Click does work</a></li>
</ul>

$('.click-not-working').on('click', e => {
  e.preventDefault();
})

https://jsbin.com/xugilaguku/edit?html,js,output

我不知道为什么你首先需要这个..