Блог

Главная - Вопросы по программированию - jQuery: добавление функции щелчка к существующему переключателю

jQuery: добавление функции щелчка к существующему переключателю

#jquery

#jquery

Вопрос:

Как я могу закрыть этот ящик при нажатии на холст? Кроме того, поскольку сам ящик находится на холсте, щелчок по ящику, когда он открыт, тоже закроет его? Это было бы нежелательно. Любая помощь была бы отличной, спасибо!

 $(function(){
    $('.toggle-nav').click(function(){
        toggleNav();
        });
    });
function toggleNav(){
    if ($('#site-wrapper').hasClass('show-nav')){
        // nav-close functions
        $('#site-wrapper').removeClass('show-nav');
    } else{
        // nav-open functions
        $('#site-wrapper').addClass('show-nav');
        }
    }

http://jsfiddle.net/8s42f/

Комментарии:

1. Что вы подразумеваете под «ящиком»?

2. «закройте этот ящик при нажатии на холст» — попахивает Android.

Ответ №1:

Это должно сработать:

http://jsfiddle.net/8s42f/3/

Обновленный JS:

 $(function () {
    var $wrapper = $('#site-wrapper');
    function toggleNav (event) {
        $wrapper.toggleClass('show-nav');
        event.stopPropagation();
    }
    function hideNav (event) {
        if (!$(event.target).is('#site-menu, #site-menu *'))
            $wrapper.removeClass('show-nav');
    }
    $('.toggle-nav').click(toggleNav);
    $('#site-wrapper').click(hideNav);
});

Я внес следующие изменения:

  • Заменены повторяющиеся запросы на #site-wrapper кэшированную переменную $wrapper
  • Заменена toggleNav() логика $.fn.toggleClass() методом jQuery
  • Используется event.stopPropagation() для предотвращения .toggle-nav запуска $wrapper события щелчками
  • Добавлен hideNav() метод и привязан к $wrapper
  • Добавлена проверка внутри hideNav() , чтобы предотвратить перехват щелчков внутри навигации.

Надеюсь, это поможет!

Комментарии:

1. Действительно? Это позволяет щелкнуть «холст» и закрыть «ящик»?

Ответ №2:

Предположения: — холст = документ — ящик = #сайт-оболочка

Установите обработчик щелчка включенным document . Если щелкнуть что-либо, кроме #site-wrapper или его дочерних элементов, «ящик» будет закрыт.

 $(function () {
    $(document).on('click', function (e) {
        if (e.target.id === 'site-wrapper' || $(e.target).closest('#site-wrapper').length) {
            e.stopPropagation();
            if (! $('#site-wrapper').hasClass('show-nav')) {
                toggleNav();
            }
        } else if ($('#site-wrapper').hasClass('show-nav')) {
            toggleNav();
        }
    });
});

function toggleNav() {
    $('#site-wrapper').toggleClass('show-nav');
}

И демонстрация: http://jsfiddle.net/rodgolpe/8s42f/5 /

Метки: