конфликт jQuery $ (документ) .click

0

Я разрабатываю отзывчивый веб-сайт. Есть две функции: вложенные функции используются в обоих случаях, обрабатывая событие $(document).click(). Оба скрывают одни и те же элементы - .dropdown.slide-out. Однако в первом случае функция относится к селектору .dropdown, а во втором - к селектору .slide-out. Первый работает только: где я ошибаюсь?

/*
    |---------------------------------------
    | Dropdowns
    |---------------------------------------
    */
$(function () {
    var label = $('.dropdown-toggle');
    var allDropDowns = $('.dropdown-menu, .rmb-popup');
    var el = $(this);
    label.click(function () {
        if (Modernizr.mq('only screen and (min-width: 768px)')) {
            allDropDowns.hide();
            $(this).parents('.dropdown').children('.dropdown-menu').toggle('fast');
            label.removeClass('active');
            $(this).addClass('active');
            return false
        }
    });

    // Conflict point #1. Hide .dropdown.slide-out-right
    $(document).click(function () {
        allDropDowns.hide();
        label.removeClass('active');
    });

    allDropDowns.click(function (event) {
        event.stopPropagation();
    });
});

/*
    |---------------------------------------
    | Slide-outs
    |---------------------------------------
    */

$(function () {
    var soRight = $('.slide-out-right');
    $('.btn-menu-secd').click(function () {
        if (Modernizr.mq('only screen and (max-width: 767px)')) {
            soRight.animate({
                right: 0
            }, 400)
        }
        return false
    });

    // Conflict point #2. Slide out .dropdown.slide-out-right
    $(document).click(function () {
        if (Modernizr.mq('only screen and (max-width: 767px)')) {
            if (soRight.attr('style')) {
                soRight.animate({
                    right: '-270px'
                }, 400, function () {
                    soRight.removeAttr('style')
                })
            }
        }
    });

    soRight.click(function (event) {
        event.stopPropagation();
    });
});
  • 1
    Почему ? «Оба скрывают одни и те же элементы - .dropdown»?
  • 2
    Мне не ясно, с какой проблемой вы столкнулись. Можете ли вы описать, какой тип клика работает, какой тип клика не работает? Вы понимаете, что вы назначили два отдельных поведения для клика в документе, верно?
Показать ещё 4 комментария
Теги:
responsive-design

1 ответ

0
Лучший ответ

UPD: Я был неправ. JQuery начинается с 1.7, чтобы добавить более одного или нескольких обработчиков в 1 событие. Он выполнит его в порядке привязки Документация

FIDDLE

1:

$(function(){
var allDropDowns = $('.dropdown-menu');
$('.dropdown-toggle').click(function() {
        allDropDowns.show();
        return false;
});
$(document).click(function() {   
    allDropDowns.hide();
});    
$('.dropdown-menu').click(function(e) {
        e.stopPropagation(); 
        e.preventDefault(); 
});
});

2:

$(function() {
var slideOut = $('.slideout');
$('.btn-menu').click(function() {
        slideOut.show();
        return false;
});
$(document).click(function() {
    slideOut.hide();
});
$('.slideout').click(function(e) {
    e.stopPropagation(); 
    e.preventDefault();
});
});
Поделиться
  • 0
    Благодарю. Но это решение, на мой взгляд, усложнит структуру кода. Может быть, есть способ изолировать обработчики событий? В плагинах они не конфликтуют с другим кодом, верно? Я экспериментировал с пространством имен, .on / .off, локальными переменными, но безрезультатно.
  • 0
    Есть одна из моих попыток jsfiddle.net/supervova/8Hqj9/2
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню