72

我使用的是默认导航栏，其中一些列表项是下拉菜单。我无法单击触发下拉菜单的链接。我知道我可以在下拉列表中添加一个重复的链接，但我不想这样做。是否可以使头部链接成为可点击的链接（而不仅仅是下拉菜单的句柄）？

作为参考，请参阅下面下拉列表中的第一个链接。我希望用户能够单击它并实际转到它指向的页面。

<nav class="navbar navbar-fixed-top admin-menu" role="navigation">
  <div class="navbar-header">...</div>
   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav navbar-right">
       <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           I DONT WORK! <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
           <li><a href="/page2">Page2</a></li>
         </ul>
       </li>
       <li><a href="#">I DO WORK</a></li>
     </ul>               
   </div><!-- /.navbar-collapse -->
 </nav>
4

16 回答 16

91

这是在悬停时向下滑动子菜单的代码，如果您单击它，您可以重定向到页面。

如何：从标签中剥离class="dropdown-toggle" data-toggle="dropdown"，并添加 css.

这是jsfiddle的演示。对于演示，请调整 jsfiddle 的拆分器以查看由于 Bootstrap CSS 导致的下拉列表。jsfiddle 不会让您重定向到新页面。

在此处输入图像描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <style type='text/css'>
        ul.nav li.dropdown:hover ul.dropdown-menu {
            display: block;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-fixed-top admin-menu" role="navigation">
        <div class="navbar-header">...</div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown"><a href="http://stackoverflow.com/">Stack Overflow <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="/page2">Page2</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">I DO WORK</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </nav>
</body>
</html>
于 2013-11-12T20:03:54.293 回答
54

只需disabled在锚点上添加类：

<a class="dropdown-toggle disabled" href="{your link}">
Dropdown</a>

你可以自由离开。

于 2015-09-20T07:22:23.627 回答
18

1：删除下拉触发器：

data-toggle="dropdown"

2：添加这个你的CSS

.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    margin-top: 0px;
}

为人们发布了如何偶然发现这一点

于 2014-02-16T01:44:49.807 回答
18

这是一个基于 Bootstrap 3.3 使用一点 jQuery 的小技巧。

单击打开的下拉菜单会执行该链接。

$('li.dropdown').on('click', function() {
    var $el = $(this);
    if ($el.hasClass('open')) {
        var $a = $el.children('a.dropdown-toggle');
        if ($a.length && $a.attr('href')) {
            location.href = $a.attr('href');
        }
    }
});
于 2015-04-14T17:37:44.820 回答
11

我知道这有点老了，但我最近在寻找类似的解决方案时遇到了这个问题。依赖悬停事件不利于响应式设计，在移动/触摸屏上尤其糟糕。我最终对 dropdown.js 文件进行了小编辑，允许您单击菜单项以打开菜单，如果再次单击菜单项，它将跟随它。

这样做的好处是它根本不依赖悬停，因此它在触摸屏上仍然可以很好地工作。

我已经在这里发布了：https ://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

希望有帮助！

于 2014-03-13T19:53:57.833 回答
5

No need of use addition CSS/JS (Tested)

  1. data-toggle="dropdown" - for Clickable (can use Mobile as well web)
  2. data-hover="dropdown" - for Hover (web only, because mobile doesn't have feature HOVER)

Works fine on Mobile as well :)

Code Example for Clickable(data-toggle="dropdown")

/*!
 * this CSS code just  for snippet preview purpose. Please omit when using  it. 
 */

#bs-example-navbar-collapse-1 ul li {
  float: left;
}

#bs-example-navbar-collapse-1 ul li ul li {
  float: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li>
      <a class="" href="">Home</a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                subnav1
            </a>
      <ul class="dropdown-menu">
        <li><a href="">Sub1</a></li>
        <li><a href="">Sub2</a></li>
        <li><a href="">Sub3</a></li>
        <li><a href="">Sub4</a></li>
        <li><a href="">Sub5</a></li>
        <li><a href="">Sub6</a></li>
      </ul>
      <div class="clear"></div>
    </li>
    <li class="dropdown">
      <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
            subnav2
            </a>
      <ul class="dropdown-menu">
        <li><a href="">Sub1</a></li>
        <li><a href="">Sub2</a></li>
        <li><a href="">Sub3</a></li>
        <li><a href="">Sub4</a></li>
        <li><a href="">Sub5</a></li>
        <li><a href="">Sub6</a></li>
      </ul>
      <div class="clear"></div>
    </li>
  </ul>
</div>

<br>
<br>
<p><b>Please Note:</b> added css code not related to Bootstrap navigation. It's just for snippet preview purpose </p>

Output

output enter image description here

于 2016-11-11T17:01:52.863 回答
4

这是我的解决方案，它在您的标题中使用 JQuery，并且适用于移动设备。

在移动设备上，顶部链接需要点击两次：一次下拉菜单，一次转到其链接。

$(function(){
  $('.dropdown-toggle').click(
    function(){
      if ($(this).next().is(':visible')) {
        location.href = $(this).attr('href');;
      }
     });
  });
});

于 2017-09-13T19:14:07.090 回答
3

在锚点中添加禁用类，以下是 js：

$('.navbar .dropdown-toggle').hover(function() {
  $(this).addClass('disabled');
});

但这对移动设备不友好，因此您需要删除移动设备的禁用类，因此更新的 js 代码如下：

$('.navbar .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
  else { $(this).removeClass('disabled'); }
});
于 2016-09-27T09:36:36.723 回答
1

这会在打开时启用下拉菜单的顶级菜单中的链接，并在关闭时禁用它，唯一的缺点是显然必须在下拉菜单之外“点击”两次才能在移动设备中关闭它。

$(document).on("page:load", function(){
    $('body').on('show.bs.dropdown', function (e) {
        $(e.relatedTarget).addClass('disabled')
    });
    $('body').on('hide.bs.dropdown', function (e) {
        $(e.relatedTarget).removeClass('disabled')
    });
});

请注意，这假定了“标准”标记和 Turbolinks (Rails)。您可以尝试使用 $(document).ready(...)

于 2014-12-11T21:52:25.900 回答
1

任何到达这里的人都想快速解决这个问题。将 bootstrap.js（或 dropdown.js）中的“Dropdown.prototype.toggle”函数替换为以下内容：

  Dropdown.prototype.toggle = function (e) {
var $this = $(this)

if ($this.is('.disabled, :disabled')) return

var $parent  = getParent($this)
var isActive = $parent.hasClass('open')

clearMenus()

if (!isActive) {
    if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
    }

    var relatedTarget = { relatedTarget: this }
    $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

    if (e.isDefaultPrevented()) return

    $parent
      .toggleClass('open')
      .trigger('shown.bs.dropdown', relatedTarget)

    $this.focus()
}
else
{
    var href = $this.attr("href").trim();

    if (href != undefined && href != " javascript:;")
        window.location.href = href;
}

return false
  }

在第二次单击时（即：如果菜单项具有“open”类），它将首先检查 href 是否未定义或设置为“javascript:;” 在送你沿着你的快乐方式之前。

享受！

于 2014-12-03T15:47:49.327 回答
1

或者，这是一个简单的 jQuery 解决方案：

$('#menu-main > li > .dropdown-toggle').click(function () {
    window.location = $(this).attr('href');
});
于 2017-07-10T20:01:45.143 回答
1

这个话题太老了，但我需要一个适用于桌面和移动设备的解决方案，而这些似乎都不适合我。不幸的是，这是我想出的解决方案，它涉及检查窗口宽度并将其与移动菜单断点进行比较：

$( 'a.dropdown-toggle' ).on( 'click', function( e ) {
    var $a = $( this ),
        $parent = $a.parent( 'li' ),
        mobile_bp = 767, // Default breakpoint, may need to change this.
        window_width = $( window ).width(),
        is_mobile = window_width <= mobile_bp;

    if ( is_mobile && ! $parent.hasClass( 'open' ) ) {
        e.preventDefault();
        return false;
    }

    location.href = $a.attr( 'href' );
    return true;
});
于 2021-01-13T08:57:24.853 回答
0

我知道为时已晚，但任何来这里寻求帮助的人现在都可以看到这篇文章。有两个选项使用 css/JavaScript，如果您使用 css，它将适用于可点击顶部菜单宽度大于 769 像素的设备，这将完美地工作

见这里的文章

于 2015-01-30T18:20:13.847 回答
0

这在我的情况下有效：

$('a[data-toggle="dropdown"]').on('click', function() {

    var $el = $(this);

    if ( $el.is(':hover') ) {

        if ( $el.length && $el.attr('href') ) {
            location.href =$el.attr('href');
        }

    }

});
于 2018-02-06T19:06:32.563 回答
0

上述大多数解决方案都不适合移动设备。

我提出的解决方案检测它是否不是触摸设备并且navbar-toggle（汉堡菜单）不可见，并使父菜单项在悬停时显示子菜单，然后单击其链接

也使 tne margin-top 0 因为导航栏和某些浏览器中的菜单之间的间隙不会让您将鼠标悬停在子项上

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

于 2017-03-13T09:55:12.087 回答
-2

这 100% 有效：

HTML：

<li class="dropdown">
          <a href="https://www.bkweb.co.in/" class="dropdown-toggle" >bkWeb.co.in Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>

CSS：

@media (min-width:991px){
  ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
  }
}

CODEPEN 中的示例

于 2018-02-23T11:49:48.720 回答