在 html 的移动版本中，大型菜单的锚标记不起作用

Question

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

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

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 Whosebug)

$(".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 Whosebug)
});

是否是脚本相关的问题？

哪里改？有人帮帮我吗？

我之前已经在 Whosebug 中 post 这个问题，但没有得到答案。这就是为什么再次重新post 问题。请帮忙。

Answer 1

因为e.preventDefault()。

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

它只发生在移动设备上，因为您只能在移动设备 (if ($(window).width() <= 943) {) 上调用 click 上的 preventDefault。

<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

我不确定你为什么首先需要这个..

在 html 的移动版本中，大型菜单的锚标记不起作用

Anchor tag of mega menu is not working in mobile version in html

html

javascript

jquery

megamenu