2012-08-03 2 views
6

Ich habe dieses Bootstrap Twitter-Dropdown-Menü. Ich habe das Klickereignis durch ein Hover-Ereignis ersetzt. Jetzt ist das einzige Problem, soll www.google.com folgen, tut es aber nicht. Ich habe versucht mit:Bootstrap Twitter Drop-Down: Lassen Sie die Eltern dem Link folgen

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

aber keine Würfel. Hier

ist der Code:

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

Antwort

2

Nicht wirklich ganz sicher, auf was Sie versuchen, hier zu erreichen.

Aber das würde die .click() bringen Sie zu google.

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

Was, warum das <a> Click-Ereignis gegessen Ich bin derzeit nicht sicher.

+0

Nun wirklich nicht so, wie ich dinamically Werte verwenden müssen, aber ich herausgefunden. Danke – Faraderegele

+1

Ich nehme an, Sie setzen 'window.location = $ (" # element "). Href()' oder so. Nun, zumindest hast du es funktioniert! – Sphvn

+1

Nur 'window.location = this.href' ist ausreichend. –

16

Sie können dies ohne JavaScript erreichen, indem Sie das Markup etwas ändern und eine CSS-Klasse hinzufügen.

Ändern Sie den HTML-Markup (** Anmerkungdeaktiviert hinzugefügt wird neben Dropdown-Toggle): **

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

Wenn Sie das Untermenü auf schweben erscheinen (da Willen klicken gehen jetzt an die angegebene uRL), fügen Sie diese CSS-Klasse:

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

Dies gilt 2.3.1 Version Bootstrap.

+0

Super! Ihre Antwort sollte statt der obenstehenden angenommen werden. Genau das habe ich gebraucht. –

+0

+1 für Datenziel = "" – Flowpoke

2

Wenn Sie die Eltern möchten den Link auf Wordpress folgen verwenden diese:

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

Bootstrap 3.0 docs sagen das data-target Attribut zu verwenden, anklickbare Links zu bewahren.

So würde Ihre HTML werden: irgendwie basierend auf Ihren Vorschlag

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