打开另一个DIV时关闭一个DIV

时间:2016-10-24 19:43:44

标签: jquery

我想要实现的是在使用jQuery打开其他DIV(单击打开)时关闭一个DIV。以下是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及其子项后,我可以将区域下拉列表向下滑动。我也可以获得公司注册模型以点击打开。但是,当第一个DIV处于活动状态时,当我单击第二个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写了不同的函数。

0 个答案:

没有答案