logo标签列表

Bootstrap Twitter下拉菜单：使父元素跟随链接

jquerytwitter-bootstrap
6

我有一个Bootstrap Twitter下拉菜单。我将点击事件替换为悬停事件。 现在唯一的问题是，它应该跟随www.google.com，但它没有。我尝试过:

 jQuery(".nav .dropdown-toggle").click(function () {
      return true;
    });

但是没有成功。 以下是代码：
<html>
  <head>
    <title>text</title>
    <link type="text/css" rel="stylesheet"  href="docs/assets/css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet"  href="docs/assets/css/bootstrap-responsive.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
    <script type="text/javascript">
      $(function(){
        jQuery('.dropdown-toggle').dropdown();
        jQuery('ul.nav li.dropdown').hover(
        function() {jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();},
        function() {jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();}
      );

        jQuery(".nav .dropdown-toggle").click(function () {
          return true;
        });
      });
    </script>

  </head>
  <body>
    <ul class="nav nav-pills">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://www.google.com">
          Dropdown
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
        </ul>
      </li>
    </ul>

  </body>
</html>

http://jsfiddle.net/rgdwM/

4个回答
16

你可以通过改变标记并添加CSS类来完成此操作，而无需使用JavaScript。

将HTML标记更改为（注意：在dropdown-toggle旁边添加了disabled）：


**Change the HTML markup to (**note disabled is added next to dropdown-toggle):**
<a class="dropdown-toggle disabled" data-toggle="dropdown" data-target="#" href="http://www.google.com">
    Dropdown
    <b class="caret"></b>
</a>

如果您希望子菜单在鼠标悬停时出现（因为点击现在将转到指定的URL），请添加此CSS类：

.nav li.dropdown:hover .dropdown-menu
{
    display: block;    
}

这适用于 Bootstrap 版本 2.3.1。

太棒了！你的答案应该被接受，而不是上面那个。这正是我所需要的。 - Tamik Soziev
2
如果您想在WordPress上让父级跟随链接，请使用以下代码：

    $(".nav .dropdown-toggle").click(function () {
    window.location = $(this).attr('href');
    });
2

我不太确定您在这里想要实现什么。

但这将使.click()带您前往谷歌。

$(".nav .dropdown-toggle").click(function () {
  window.location = "http://www.google.com";
});

关于为什么<a>的点击事件被吃掉了，我目前还不确定。
不是完全像这样，因为我需要使用动态值，但是根据您的建议，我想出了一种方法。谢谢。 - Faraderegele
1
我猜你刚刚设置了 window.location = $("#element").href() 或类似的代码。好吧，至少你让它工作了！ - Sphvn
1
只需要使用 window.location = this.href 就足够了。 - Leniel Maccaferri
0

Bootstrap 3.0文档建议使用data-target属性来保留可点击的链接。

因此，你的HTML代码将变成：

<a class="dropdown-toggle" data-toggle="dropdown" data-target="http://www.google.com" href="#">
    Dropdown
    <b class="caret"></b>
</a>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接