CODEWITHSUNDEEP
javascriptphpjqueryhtmltwitter-bootstrap
Rhendera
Rhendera

Reputation: 45

Twitter Bootstrap Dropdown PHP link not opening

I have created a dropdown menu, and it's used in a PHP page. I want that the main button (the one that has dropdown links) also still works and refers to a page. I did everything the Bootstrap page tells me to do, but for some reason it's still not working. (http://getbootstrap.com/javascript/#dropdowns ) 

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="?action=landing">
        <i class="icon-info"></i>Information <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">dropdown #1</a></li>
        <li><a href="#">dropdown #2</a></li>
    </ul>
</li>

That's the HTML, This is the JS I'm using:

<script type="text/javascript">
    var revapi;
    jQuery(document).ready(function() {
        $('.dropdown-toggle').dropdown()  
    });

    $('.dropdown').hover(function(){ 
        $('.dropdown-toggle', this).trigger('click'); 
    });
</script>

How do I get the main button (Information) to link to "?action=landing" ?

Upvotes: 0

Views: 85

Answers (2)

Kalzem
Kalzem

Reputation: 7492

The problem is that Bootstrap prevents the default behaviour of href.

So you need to do it in jQuery : 

jQuery("a.dropdown-toggle").click(function(){
    window.location.href = "http://example.com/?action=landing";
});

EDIT

It bugs because of this :

$('.dropdown').hover(function(){ 
    $('.dropdown-toggle', this).trigger('click'); 
});

Replace it with

$('.dropdown').hover(function(){ 
    $('.dropdown-toggle', this).dropdown('toggle'); 
}, function(){
    $('.dropdown-toggle', this).dropdown('toggle');
});

Upvotes: 1

Kevin Pei
Kevin Pei

Reputation: 5872

After much frustration, I've managed to accomplish it by creating a pseudo-link and putting the dropdown menu on that.

Fiddle: http://jsfiddle.net/zwfNL/1/
Javascript

var revapi;
jQuery(document).ready(function () {

    $('.dropdown-toggle').dropdown()

});
$('.dropdown').hover(function () {
    $('.dropdown-toggle').dropdown('toggle')
});

CSS (necessary - to override bootstrap backdrop)

#dropdown-link{
    position:relative;
    z-index:10000;
}

HTML

<li class="dropdown">
    <a id="dropdown-link" href="?action=landing"><i class="icon-info"></i>Information <span class="caret"></span></a>
    <a style="display:none;" class="dropdown-toggle" data-toggle="dropdown" data-target="#"></a>
    <ul class="dropdown-menu">
        <li><a href="#">dropdown #1</a>

        </li>
        <li><a href="#">dropdown #2</a>

        </li>
    </ul>
</li>

Upvotes: 2

Related Questions