1

ВНИМАНИЕ Codepen

/**
 * Открытие и закрытие блока с формой авторизации
 */


function openHeaderAuth() {

    $('#js-open-auth-block').on('click', function (e) {
        e.preventDefault();
        var block = $(this).parent('.login');
        if (!block.hasClass('active')) {
            block.addClass('active');
            block.removeClass('hide');
            console.log(1);
        }
        else {
            block.addClass('hide');
            block.removeClass('active');
            console.log(2)
        }
    });
}

/**
 * Скрытие блока с формой авторизации при клике вне его области
 */

function closeAuthBlock() {
    var block = $('div.login');

    $(document).mouseup(function (e) {
        if (block.hasClass('active')) {
            if (!($(e.target).hasClass('login'))) {
                block.addClass('hide');
                block.removeClass('active');
                console.log(3)
            }
        }
    });
}

Нужно реализовать, что бы блок с формой закрывался при клике и на "личный кабинет", и когда клик вне его. Все готово, но при клике на Личный Кабинет при открытой форме она не закрывается, так как сначала срабатывает закрытие и тут же открытие.

Буду благодарен советам

6
  • А можно просмотреть и саму вёрстку?
    – Mojito
    19 окт 2016 в 9:30
  • может как-то так : jsfiddle.net/CRafT/L6yxp3cu
    – C.Raf.T
    19 окт 2016 в 9:34
  • @MOjito Кодпен же есть 19 окт 2016 в 9:35
  • @C.Raf.T А что вы изменили? Не вижу 19 окт 2016 в 9:36
  • добавил классы к элементам div и класс для "личного кабинетa"
    – C.Raf.T
    19 окт 2016 в 9:45

2 ответа 2

3

Во-первых, не нужен класс hide, он всего-лишь повторяет свойства, которые есть в определении блока и так.

Функцию closeAuthBlock() надо переделать, в данный момент она закрывается при фокусе на инпуте, что делает невозможным использование формы.

function closeAuthBlock() {
  var block = $('div.login');

  $(document).click(function (e) {
    if (block.hasClass('active')) {
        if ( !$(e.target).closest('.login').length ) {
            block.removeClass('active');
        }
    }
  });
}

Функцию openHeaderAuth() можно сократить до вида:

function openHeaderAuth() {
  $('#js-open-auth-block').on('click', function (e) {
    e.preventDefault();
    var block = $(this).parent('.login');

    block.toggleClass('active');
  });
}

Как это работает: каждый клик по кнопке #js-open-auth-block включает-выключает класс active (function openHeaderAuth() ); клик вне блока выключает класс active (function openHeaderAuth() ).

4
  • Чудеса в решете! Почему у меня перекрывалось, а у вас нет? У меня же вроде как то же самое было, но более громоздко расписано .hide уже был от безысходства) 19 окт 2016 в 13:06
  • Всё дело в методе toggleClass — у вас были сложные условия, которые действовали одновременно, а сейчас клик по кнопке работает отдельно, как и клик по остальному документу. 20 окт 2016 в 6:31
  • @SashaOmelchenko нет, дело не в нем. Дело в вызове closest 20 окт 2016 в 8:00
  • @НикитаЩипилов потому что вы проверяли класс у e.target напрямую, а тут идет проверка по всей цепочке родителей 20 окт 2016 в 8:00
2

Во-первых, используйте одно и то же событие, не надо использовать в одном месте click, а в другом - mouseup.

Во-вторых, используйте e.stopPropagation() чтобы отменить срабатывание второго обработчика на то же самое событие.

В-третьих, узнайте про функцию toggleClass

3
  • 1) Почему? 2 и 3 спасибо, не знал 19 окт 2016 в 13:08
  • @НикитаЩипилов потому что с помощью stopPropagation можно прервать только то событие, которое было обработано 19 окт 2016 в 13:09
  • Понял, спасибо еще раз, все заработало 20 окт 2016 в 6:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.