使用jQuery显示/隐藏菜单

Question

I have a page with content (on the left) and sidebar (on the right). For screen widths <= 480px the 2 div's are placed one under the other (100% widths). The "Show/Hide" button that becomes visible is meant to toggle the sidebar's visibility when clicked. I use

$(".sidebar .box").slideToggle(200);

for this purpose.

See everything together on jsfiddle .

The problem: if I switch to wide screen and then back to narrow screen (width <= 480px) again, clicking the button produces a "back and forth" bug.

Where is my mistake?

Thank you!

Answer 1

I believe the reason is that this code:

$("a.expander").click(function () {
    $(this).toggleClass('close');
    $(".sidebar .box").slideToggle(200);
});

gets executed every time the function showSidebar is run, which is every time the window is resized. JQuery's click function adds a new event handler each time, and executes all of them on each window resize.

The solution would be to move the click handler registration outside of the function.

Answer 2

I believe that your problem is that your slide function gets called continuously when your window is resized. Rather than have this event occur unchecked, try to control it using an event handler like so:

Use .one() :

$('#your_element_id').one("click", function () {     
    $('.your_css_style_class').slideToggle(200); 
});

Another thing to keep in mind is that if down the line, you desire to display it hidden, you may want to use .slideDown() rather than .slideToggle() to begin with.

Here is a jQuery reference to the 'one' function: http://api.jquery.com/one

Answer 3

something like this? http://jsfiddle.net/jqdvj42u/3/

$(document).ready(function() {
     $("a.expander").click(function () {
        $(this).toggleClass('close');
        $(".sidebar .box").slideToggle(200);
    });
});

function showSidebar() {   
    if ($(window).width() <= 480) {
        // Close sidebar when window width <= 480px
        $(".sidebar .box").removeClass('open');
        // Click expander button to show/hide sidebar

    } else {
        $("a.expander").removeClass('close');
        // Open sidebar when window width > 480px;
        $(".sidebar .box").addClass('open');
    }
}
showSidebar();

$(window).resize(showSidebar);

your click shouldnt be called within showSidebar() because it'll bind the click event every time that function is called. resize triggers showSidebar() multiple times, so the click is bound multiple times. also, you should use jQuery 1.11 as the lowest version since its the most up-to-date version thats stable on IE<9. if you dont mind support on IE<9, use jQuery version 2.0 or higher.