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

Question

提问by emersonthis

I'm using the default navbar and a couple of the list items are dropdowns. I'm not able to click the link that triggers the dropdown. I know that I could just add a duplicate link into the dropdown but I'd rather not. Is it possible to make the head link a clickable link (not just a handle for the dropdown)?

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

For reference, see the first link in the dropdown below. I want users to be able to click it and actually go to the page it points to.

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

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

Answer 1

回答by Win

Here this the code which slides down the sub menu on hover, and let you redirect to a page if you click on it.

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

How:strip out class="dropdown-toggle" data-toggle="dropdown"from a tag, and add css.

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

Here is the demo at jsfiddle. For demo, please adjust jsfiddle's splitter to see the dropdown due to Bootstrap CSS. jsfiddle won't let you redirect to a new page.

这是jsfiddle的演示。对于演示，由于 Bootstrap CSS，请调整 jsfiddle 的拆分器以查看下拉列表。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>

Answer 2

回答by deyvw

Just add the class disabledon your anchor:

只需disabled在您的锚点上添加类：

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

And you are free to go.

你可以自由去。

Answer 3

回答by garfyld

Here is a small hack based on Bootstrap 3.3 using a bit jQuery.

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

A click on a opened dropdown-menu executes the link.

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

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

Answer 4

回答by user3314900

1: remove dropdown-trigger:

1：删除下拉触发器：

data-toggle="dropdown"

2: add this your css

2：添加这个你的css

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

posted for the people how stumbled upon this

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

Answer 5

回答by Matthew Hanlon

I know this is a little old, but I recently came across this while looking for a similar solution. Relying on hover events isn't good for responsive design, and especially terrible on mobile/touch screens. I ended up making a small edit to the dropdown.js file the allows you to click the menu item to open the menu and if you click the menu item again it will follow it.

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

The nice thing about this is it doesn't rely on hover at all and so it still works really nicely on a touch screen.

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

I've posted it here: https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

我已经把它贴在这里：https: //github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

Hope that helps!

希望有帮助！

Answer 6

回答by Abdulla Nilam

No need of use addition CSS/JS (Tested)

无需使用附加 CSS/JS（已测试）

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

data-toggle="dropdown"- 对于可点击（可以使用移动以及网络）
data-hover="dropdown"- 用于悬停（仅限网络，因为手机没有功能HOVER）

Works fine on Mobile as well :)

在移动设备上也能正常工作:)

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

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

输出

Answer 7

回答by Enjabain

Here is my solution which uses JQuery in your header, and works on Mobile.

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

On mobile the top links require two taps: one to dropdown the menu and one to go to its link.

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

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

Answer 8

回答by Himanshu Shakhar

Add disabledClass in your anchor, following are js:

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

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

But this is not mobile friendly so you need to remove disabledclass for mobile, so updated js code is following:

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

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

Answer 9

回答by pimbrouwers

Anyone arriving here who wants the quick answer to this problem. Replace the "Dropdown.prototype.toggle" function in your bootstrap.js (or dropdown.js) with the following:

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

On the second click (ie: if the menu item has the class "open") it will first check if the href is undefined or set to "javascript:;" before sending you along your merry way.

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

Enjoy!

享受！

Answer 10

回答by hisa_py

This enables the link in the top-level menu of the dropdown when it's opened and disables it when closed, with the only drawback of apparently having to "tap" twice outside of the dropdown to close it in mobile devices.

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

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

Notethis assumes the "standard" markup and Turbolinks (Rails). You can try with $(document).ready(...)

请注意，这假定了“标准”标记和 Turbolinks（Rails）。你可以试试 $(document).ready(...)

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

提问by emersonthis

回答by Win

回答by deyvw

回答by garfyld

回答by user3314900

回答by Matthew Hanlon

回答by Abdulla Nilam

Works fine on Mobile as well :)

在移动设备上也能正常工作:)

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

Clickable( `data-toggle="dropdown"`) 的代码示例

回答by Enjabain

回答by Himanshu Shakhar

回答by pimbrouwers

回答by hisa_py

相关推荐

最近更新

标签

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

提问by emersonthis

回答by Win

回答by deyvw

回答by garfyld

回答by user3314900

回答by Matthew Hanlon

回答by Abdulla Nilam

Works fine on Mobile as well :)

在移动设备上也能正常工作:)

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

Clickable( data-toggle="dropdown") 的代码示例

回答by Enjabain

回答by Himanshu Shakhar

回答by pimbrouwers

回答by hisa_py

相关推荐

Bootstrap 3 仅在移动视图上应用 CSS

如何在 CSS 中为元素设置旋转点？

CSS 将网页高度调整为手机屏幕高度

CSS 在不使用 LESS 的情况下更改引导程序导航栏折叠断点

相关推荐

最近更新

标签

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

Clickable( `data-toggle="dropdown"`) 的代码示例