Как отключить связь, но сохранить данные в рабочем состоянии

Question

Я работаю над меню, используя бутстрап.

Меню имеет 3 уровня. Главная> первое подменю> второе подменю

пункты меню в первом подменю, который имеет второе подменю должно быть кликабельны также. Это уже работает. Подменю отображается на рабочем столе путем зависания, но на мобильном устройстве вам нужно щелкнуть элемент меню, чтобы открыть подменю. На мобильном телефоне я хочу, чтобы этот href исчез.

На данный момент я использую этот код, чтобы удалить его на мобильный телефон:

if ($(window).width() > 768) { 
    if ($(window).width() < 768) { 
     $(".dropdown-toggle").each(function(){ 
      $(".dropdown-toggle").removeAttr("data-target"); 
      $(".dropdown-toggle").removeAttr("href"); 
     }) 
    } 

    $(window).resize(function() { 
     if ($(window).width() < 768) { 
      $(".dropdown-toggle").each(function(){ 
       $(".dropdown-toggle").removeAttr("href"); 
      }) 
     } 
    }); 
}); 

Но проблема с этим кодом является то, что он все еще ушел, когда вы вернетесь к резолюции, это больше, чем 768. Это происходит, когда вы идете в альбомном режиме на планшете.

Я уже искал это. Я обнаружил, что вы можете добавить класс 'disabled' или что вы можете его стиль с помощью указателей-событий: none. Но все эти решения также отключают функцию data-toggle = "dropdown" ...

Итак, как я могу отключить href, но сохранить работу данных?

Заранее благодарен!

это HTML я использую только в случае, если:

<nav class="navbar navbar-default lumenisInnerMenu" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
     </div> 
     <div class="collapse navbar-collapse lumenisListItems"> 
      <ul class="nav navbar-nav"> 
       [*>NODE] 
      </ul> 
     </div> 
    </div> 
</nav> 

[>NODE] 
    <li class="[?SELECTED]dir current[/?][?NODE] dropdown-submenu HasChildren child[=DEPTH] dropdownmenu [/?]"> 
    [?ENABLED] 
     <a href="[=URL]" class="[?NODE] dropdown-toggle[/?]" [?NODE] data-target="[=URL]" data-toggle="dropdown" [/?]> 
       <div class="textsubitem"> 
        <span>[=TEXT]</span> 
       </div> 
     </a> 
    [?ELSE] 
     <a href="#" [?NODE] [/?]> [?NODE] 
      <span>[=TEXT]</span>[/?] 
     </a> 
    [/?] 
    [?NODE] 
     <ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]"> 
      [*>NODE] 
     </ul> 
    [/?] 
    </li> 
[/>] 

Answer 1

просто использовать это.

<a href="javascript:void(0)" >Anything goes here</a> 

не используют

$(".dropdown-toggle").removeAttr("href"); 

с этим