Привязка тега мегаменю не работает в мобильной версии в html - PullRequest
Новая
       28

Привязка тега мегаменю не работает в мобильной версии в html

0 голосов
/ 17 апреля 2019

У меня есть megamenu на моем веб-сайте Laravel.В настольной версии сайта все ссылки меню работают должным образом.

Но в мобильной версии ссылки на теги привязки не работают.

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, но ответа не получил.Вот почему перепост проблемы снова.Пожалуйста, помогите.

1 Ответ

1 голос
/ 17 апреля 2019

Это из-за 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

Я не уверен, зачем вамэто в первую очередь ..

...