2012-08-03 55 views
6

我有这个引导Twitter的下拉菜单。我用鼠标悬停事件替换了点击事件。 现在唯一的问题是应该遵循www.google.com,但事实并非如此。我尝试过:Bootstrap Twitter下拉菜单:让父母跟着链接

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/

回答

2

不是真的不太清楚你正试图在这里实现什么。

但是这会让.click()带你到谷歌。

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

至于为什么吃了<a>点击事件,我目前不肯定。

+0

那么不是真的喜欢这一点,因为我需要使用dinamically值,但不知何故,我想通了,根据您的建议。谢谢 – Faraderegele 2012-08-06 07:19:51

+1

我假设你只是设置'window.location = $(“#element”).href()'左右。至少你得到它的工作! – Sphvn 2012-08-06 08:27:32

+1

只需'window.location = this.href'就足够了。 – 2013-03-14 01:57:04

16

您可以通过稍微更改标记并添加CSS类来完成此操作,而无需JavaScript。

更改HTML标记(**注禁用下一个被添加到下拉拨动):**

<a class="dropdown-toggle disabled" data-toggle="dropdown" data-target="#" href="http://www.google.com"> 
    Dropdown 
    <b class="caret"></b> 
</a> 

如果你想在子菜单出现在悬停(因为点击意志现在去指定的网址),添加这个CSS类:

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

这适用于自引导2.3.1版。

+0

太棒了!你的答案应该被接受,而不是顶部的答案。这正是我需要的。 – 2013-06-13 05:39:48

+0

+1 for data-target =“” – Flowpoke 2014-06-02 20:00:32

2

如果您希望父遵循WordPress的链接使用:

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

Bootstrap 3.0 docs说使用data-target属性保留可点击的链接。

所以,你的HTML将成为:

<a class="dropdown-toggle" data-toggle="dropdown" data-target="http://www.google.com" href="#"> 
    Dropdown 
    <b class="caret"></b> 
</a>