Показать/скрыть меню с помощью jQuery

Question

У меня есть страница с контентом (слева) и боковой панелью (справа). Для ширины экрана < = 480px 2 div расположены один под другим (100% ширины). Кнопка «Показать/Скрыть», которая становится видимой, предназначена для переключения видимости боковой панели при нажатии. Я использую

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

для этой цели.

Просмотреть все вместе на jsfiddle.

Проблема: при переходе на широкий экран, а затем обратно узкий экран (ширина < = 480px) снова, нажав на кнопку производит «вперед и назад» ошибка.

Где моя ошибка?

Спасибо!

Answer 1

что-то вроде этого? 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); 

ваш клик не должен вызываться в showSidebar(), потому что свяжу событие щелчка каждый раз, когда вызывается функция. resize триггеров showSidebar() несколько раз, поэтому клик связан несколько раз. Кроме того, вы должны использовать jQuery 1.11 как самую низкую версию, так как самая последняя версия, стабильная на IE < 9. Если вы не поддерживаете поддержку IE < 9, используйте jQuery версии 2.0 или выше.

Answer 2

Я считаю, что причина в том, что этот код:

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

запускается на выполнение каждый раз, когда функция showSidebar запускается, который каждый раз, когда изменяется размер окна. Функция JQuery's click добавляет новый обработчик событий каждый раз и выполняет все из них при каждом изменении размера окна.

Решение заключается в перемещении регистратора click вне функции.

Answer 3

Я считаю, что ваша проблема заключается в том, что ваша функция слайда вызывается непрерывно, когда ваше окно изменяется. Вместо того, чтобы это событие происходит бесконтрольно, пытаться контролировать его с помощью обработчика событий, как так:

Использование .one():

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

Другое дело, иметь в виду, что, если по линии, вы хотите, чтобы отобразить он скрыт, вы можете использовать .slideDown(), а не .slideToggle() для начала.

Вот ссылка Jquery к 'одной' функции: http://api.jquery.com/one