All geek questions in one place

Dropstrap Twitter Dropdown: Make Parent Follow Link

I have a twitter bootstrap dropdown menu. I replaced the click event with a hover event. Now the only problem is to follow www.google.com, but it is not. I tried:

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

but not bones.

Here is the 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/

+6
source share
4 answers

Not too sure what you are trying to achieve here.

But this will cause .click() lead you to Google.

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

As to why the <a> click event has been eaten up, I'm currently not sure.

+2
source

You can do this without JavaScript by changing the markup and adding a CSS class.

Change HTML markup to (** note disabled added next to the drop-down switch): **

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

If you want the submenu to appear on hover (since clicking now goes to the specified URL), add this CSS class:

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

This applies to Bootstrap version 2.3.1.

+16
source

If you want the parent to follow the Wordpress link, use this:

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

Bootstrap 3.0 docs are said to use the data-target attribute to preserve clickable links.

So your HTML would be this:

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

Source: https://habr.com/ru/post/922047/

More articles:


All Articles