Question

我正在使用bootstrap在菜单上工作。

菜单有3个级别。主要＆gt; <第一子菜单>第二个子菜单

第一个子菜单中具有第二个子菜单的菜单项也需要可点击。那已经有效了。通过悬停在桌面上显示子菜单，但在移动设备上，您需要单击菜单项以打开子菜单。所以在移动设备上，我希望这个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的分辨率时它仍然消失。当你在平板电脑上进入横向模式时会发生这种情况。

我一直在寻找这个。我发现你可以添加“禁用”类，或者你可以使用指针事件来设置它：none。但所有这些解决方案也禁用了data-toggle =“下拉”功能......

那我怎么能禁用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

只需使用它。

<!DOCTYPE html>
 <html>
 <head>
  <base href="/">
  <title>Web Chat - ITSM</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta property="og:image" content="conversation.svg" />
  <meta property="og:title" content="Conversation Chat Simple" />
  <meta property="og:description" content="Sample application that shows how to use the Conversation API to identify user intents" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/app.css">
 <meta charset="UTF-8">
 <title>Title of the document</title>
  <script   
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  
  </script>
 <script type="text/javascript">
function open_chatbox() {
  $('#chat').fadeOut(500);
  $('#chatBox').fadeIn(1000);
 }
function closeChat() {
  $('#chatBox').fadeOut(500);
  $('#chat').fadeIn(1000);
 }
 </script>

 </head>

 <body>
 <div id="chat" onClick="open_chatbox();"> Chat Now </div>
 <div id="chatBox"><div onclick="closeChat()" id="close">X</div> <br><br><div id="view-change-button" class="button" onclick="PayloadPanel.togglePanel(event, this)">
    <img class="option full" src="../img/Chat Button.png">
    <img class="option not-full" src="../img/Code Button.png">
  </div>
  <div id="contentParent" class="responsive-columns-wrapper">
    <div id="chat-column-holder" class="responsive-column content-column">
      <div class="chat-column">
        <div id="scrollingChat"></div>
        <label for="textInput" class="inputOutline">
          <input id="textInput" class="input responsive-column"
            placeholder="Digite algo" type="text"
            onkeydown="ConversationPanel.inputKeyDown(event, this)">
        </label>
      </div>
    </div>

    </div>
  </div>
  <script src="js/common.js"></script>
  <script src="js/api.js"></script> 
  <script src="js/conversation.js"></script>
  <script src="js/global.js"></script>
 </body>

 </html>

不要使用

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

用这个

如何禁用链接但保持数据切换下拉工作

1 个答案: