Javascript 引导3：如何使下拉链接的头部在导航栏中可点击

我使用的是默认的导航栏，有几个列表项是下拉列表。我无法单击触发下拉列表的链接。我知道我可以在下拉列表中添加一个重复的链接，但我不愿意。是否可以将头部链接设置为可点击链接（而不仅仅是下拉菜单的手柄）

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

...

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

方法：从标记中去掉

class=“dropdown toggle”data toggle=“dropdown”

，然后添加css

这里是演示在。对于演示，请调整JSFIDLE的拆分器以查看由于引导CSS而导致的下拉列表JSFIDLE不允许您重定向到新页面

ul.nav li.下拉菜单：悬停ul.下拉菜单{
显示：块；
}
...

1:删除下拉触发器：

data-toggle="dropdown"

2：把这个添加到你的css中

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

---

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

它的优点是它完全不依赖于悬停，所以在触摸屏上仍然可以很好地工作

我把它贴在这里：

---

希望有帮助

任何来到这里想要快速回答这个问题的人。将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
  }

$('.navbar .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
  else { $(this).removeClass('disabled'); }
});

Dropdown.prototype.toggle=函数（e）{
变量$this=$（this）
if（$this.is（'.disabled，：disabled'））返回
var$parent=getParent（$this）
var isActive=$parent.hasClass（'open'））
clearMenus（）
如果（！isActive）{
if（'document.documentElement&！$parent.closest（'.navbar nav'）.length中的（'ontouchstart'））{
//如果移动，我们使用背景，因为点击事件不会委派
$（''）.insertAfter（$（this））.on（'单击'，清除菜单）
}
var relatedTarget={relatedTarget:this}
$parent.trigger（e=$.Event（'show.bs.dropdown'，relatedTarget））
if（如isDefaultPrevented（））返回
$parent
.toggleClass（“打开”）
.trigger（'show.bs.dropdown'，relatedTarget）
$this.focus（）
}
其他的
{
var href=$this.attr（“href”）.trim（）；
如果（href！=未定义&&href！=“javascript:；”）
window.location.href=href；
}
返回错误
}

在第二次单击时（即：如果菜单项具有“open”类），它将首先检查href是否未定义或设置为“javascript:；”，然后再发送给您

---

享受吧

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

$(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')
    });
});

---

注意这假设了“标准”标记和TurboLink（Rails）。你可以尝试使用$（document）。ready（…）

我知道现在已经太晚了，但是任何来这里寻求帮助的人现在都可以看到这篇文章。有两个选项可以使用css/JavaScript，如果你使用css，它将适用于大于769px宽度的设备，用于可点击的顶部菜单，这将非常适合f

---

对于文章

，这里有一个基于Bootstrap3.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');
        }
    }
});

---

只需在您的锚上添加类

disabled

：

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

---

你可以自由离开。

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

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

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

  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
  }

$('.navbar .dropdown-toggle').hover(function() {
  if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
  else { $(this).removeClass('disabled'); }
});

无需添加CSS/JS（已测试）

data toggle=“dropdown”

-用于可点击的（可以使用移动设备和网络）

data hover=“dropdown”

-用于悬停（仅限网络，因为手机没有悬停功能

）

---

可单击的代码示例（data toggle=“dropdown”）

/*！
*此CSS代码仅用于片段预览目的。使用时请省略。
*/
#bs-example-navbar-collapse-1 ul li{
浮动：左；
}
#bs-example-navbar-collapse-1 ul li{
浮动：无！重要；
}

请注意：添加的css代码与引导导航无关。它只是为了片段预览的目的

大部分

$('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');
        }

    }

});

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

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

$( '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;
});