Блог

Главная - Вопросы по программированию - Закрыть один DIV при открытии другого

Закрыть один DIV при открытии другого

#jquery

#jquery

Вопрос:

Чего я пытаюсь добиться, так это закрыть один DIV при открытии другого DIV (нажмите открыть) с помощью jQuery. Ниже приведена структура HTML.

Мне также интересно узнать, можно ли в этом случае управлять несколькими элементами DOM с помощью одной функции.

Структура HTML

 <div class="region-selection">
    <div class="region-search"><h6>REGION</h6></div>
    <div class="region-dropdown"></div>
</div>

<div id="top-login">
    <a href="#" class="top-register"><span>REGISTER</span></a>
    <div class="company-registration-modal"></div>
</div>

Здесь, щелкнув по классу .region-search и его дочерним элементам, я мог бы сдвинуть выпадающий список region вниз. Я также мог бы заставить модель регистрации компании нажать кнопку открыть. Однако, когда первый DIV активен, когда я нажимаю на второй DIV, первый остается активным. Мне нужно закрыть его.

Я также пытаюсь использовать одну и ту же функцию jQuery для управления обоими DOM. Возможно ли это?

jQuery заключается в следующем

 $(document).ready(function(){

    var $registration_dropdown=$('.company-registration-modal');
    var $registration_link=$('.top-register span, .fa-registered');

    $registration_dropdown.hide();
    $registration_link.on('click touchend', function(event){

        var target = $(event.target);

        if(target.is($registration_link)){
            $registration_dropdown.slideToggle(300);
            event.stopPropagation();
        }
    });

    $(document).click(function(e) {
        if ($(e.target).closest($registration_dropdown).length===0) {
            $($registration_dropdown).slideUp(300);
        }
    });

    $registration_dropdown.mouseleave(function(){
        $(this).delay(400).slideUp(300);
    });

});

Аналогично, я пишу другую функцию для второго DIV.

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

1. Синдико, не мог бы ты, пожалуйста, помочь мне с этим

2. Я запутался в том, что вы пытаетесь скрыть и показать. У вас есть несколько элементов «region-selection»?

3. Обратите внимание, что ваш код, как написано, скользит вниз и вверх по пустому div под ссылкой Register. Вы не показываете другой код, поэтому довольно сложно сказать, как они взаимодействуют друг с другом. Вы могли бы написать код, который управлял бы обоими, но вам нужно было бы изменить структуру HTML и / или добавить к ним новые классы.

4. Выпадающий список Region-дочерний DIV выбранного региона будет выпадать при нажатии на элемент h6-REGION. Jquery, который я смог написать, справился с этим. Как только курсор наведен на выпадающий класс region, он также закрывается. Однако, когда я нажимаю на следующий div с верхним идентификатором входа, чтобы удалить его дочерний DIV-company-registration-model, первый DIV остается открытым. Я пытаюсь закрыть выпадающий каталог region, когда нажимаю на верхний login, чтобы открыть его дочерний DIV.

5. Я также пытаюсь запустить единую функцию для обработки обоих DOM без необходимости переписывать коды