0

I'm doing a website with Twitter Bootstrap 3. I've got one dropdown on my navbar and I wanted to show that dropdown on mouse hover if the width of the window is higher than 780px. If the width is less than 780px I see the mobile menu version, so in that case I wanted to click in the navbar to show the dropdown. I've got this code in $( window ).resize(function() and in $(document).ready(function()

if ($(window).width() >= 780) {
    jQuery('ul.nav li.dropdown').hover(function () {
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
    }, function () {
        jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
    });
}

With this code if my width is less than 780px when I open the website I see the mobile navbar version and the dropdown just showed up when I click on in and if I resize my window to up than 780px the dropdown menu opens on hover (just what I want !!!!).

But if I open the website with a width higher than 780px (the dropdown will shows when mouse over) and resize the window for a width lower than 780px the mobile navbar will open on mouse over, and that's the problem !

Sorry for my English, hope someone could help me .

EDIT: I think I need to do an else statement inverting the if statement but how can I do that ?

EDIT for Pauix:

function dropdown() {
  if ($(window).width() >= 780) {

    jQuery('ul.nav li.dropdown').hover(function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
    }, function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
    });
}


}

// Execute on load
dropdown();
// Bind event listener
$(window).resize(dropdown);

I tried some else statements, the best I could do is remove the hover with $("ul.nav li.dropdown").unbind('mouseenter mouseleave'); but with this I can't even see the dropdown when I click in the parent of the dropdown

luidgi27
  • 324
  • 2
  • 15

1 Answers1

1

I fix the problem ! After a lot of tries to make it work I remembered that I could make the same that If does with

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

So I use a media query and it's working :)

luidgi27
  • 324
  • 2
  • 15