2012-08-03 9 views
6

私はこのブートストラップ・ツイッター・ドロップダウンメニューを持っています。私は、クリックイベントをホバーイベントに置き換えました。 唯一の問題はwww.google.comに従うことになっていますが、問題は解決していません。試しました:ブートストラップ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()をGoogleに連れて行くでしょう。 <a>クリックイベントが食べている理由については

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

私は現在確認していません。

+0

まあ本当にこのような、私はdinamically値を使用する必要がありますが、私はあなたの提案に基づいて、何とか考え出したとして。ありがとう – Faraderegele

+1

'window.location = $("#element ")。href()'程度に設定したと仮定します。少なくともあなたはそれを働かせました! – Sphvn

+1

'window.location = this.href'だけで十分です。 –

16

これは、マークアップを少し変更してCSSクラスを追加することで実現できます。

変更にHTMLマークアップ(**ノート無効ドロップダウン・トグルを横に追加されます):**

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

あなたは意志をクリックするので、(サブメニューがホバーに表示したい場合は

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

これは、バージョン2.3.1をブートストラップするために適用されます。今、このCSSクラスを追加、)指定されたURLにアクセスしてください。

+0

驚くばかり!あなたの答えは上のものの代わりに受け入れられるべきです。これはまさに私が必要としていたものです。 –

+0

+1のdata-target = "" – Flowpoke

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> 
関連する問題