CODEWITHSUNDEEP
javascriptjqueryhtmlcss
justinw
justinw

Reputation: 3966

jQuery resize, not performing as expected

I am in the process of building my menu behavior and wanted to use some media queries for the jQuery.

This is the basic functionality of the menu. I only want this to load when the nav ul li are display: block. Once they are inline-blocks or something else, I do not want to use slideToggle.

I tried using a resize.function as explained in this article, but when I do that, the slideToggle happens two times on click, which you can see in this fiddle.

On initial load, when you click the drop down li it performs as expected, but if you resize the windows then click the li it slide toggles two times; I am wondering why this is the case, as I very new to jQuery.

JS

$(window).resize(function(){    
    if ($("header nav ul li").css("display") == "block" ){
        $( ".dd" ).click(function() {
            $( ".submenu" ).slideToggle( "slow" );
            $( ".ar" ).toggleClass( "up" );
        });
    }
}).trigger('resize');

Upvotes: 0

Views: 70

Answers (1)

aecend
aecend

Reputation: 2462

Updated

No need to bind it to resizing, just keep it from firing unless the li elements are "block". This works, try it out.

$( ".dd" ).click(function() {
    if ($("header nav ul li").css("display") == "block"){
        $(this).parent().find( ".submenu" ).slideToggle( "slow" );
        $(this).find( ".ar" ).toggleClass( "up" );
    }
});

Upvotes: 1

Related Questions