通过单击div关闭div时出现问题

Question

我正在创建一个网站，但仍在尝试建立某个功能。 如果单击div以外的任何位置，我将尝试将div滑回到其原始位置。 我到处都是堆栈，但无济于事。 我发生的事情是，背景点击始终保持激活状态，我只需要在div滑动成为某种弹出窗口时才将其激活。

这是我的jsfiddle： https ://jsfiddle.net/DTcHh/10567/

这是其中一个div的jquery（其余类似）

var text = 1;

$('.login1').click(function(e){
    e.preventDefault();

    $('.loginform_hidden').toggleClass('loginform_visible');
    $(".animateSlide").toggle(300, function(){
        $(this).focus();
    });

    if(text == 1){
        $(".div1").toggleClass("animateSlide col-xs-12");
        $('.login1').html('Go Back');
        $('.imageOne').toggleClass('animateSlideTop');
        // If an event gets to the body
        $('.div2, .div3, .patientAccess').toggle("fast");

document.addEventListener('mouseup', function(event){
    var box = document.getElementsByClassName('animateSlide');
    if (event.target != box && event.target.parentNode != box){
         $('.div2, .div3, .patientAccess').toggle("fast");
         $(".div1").toggleClass("animateSlide ");
      text=0;
    }
            });

        text = 0;
    } else {
        $(".div1").toggleClass("animateSlide");
        $('.login1').html('Start Animation');
        $('.imageOne').toggleClass('animateSlideTop');

        $('.div2, .div3, .patientAccess').toggle("fast");

        text = 1;
    }
});

$(".div1").on('blur', function() {
    $(this).fadeOut(300);
});

编辑：jsfiddle现在合并了我一直在尝试利用的东西。

Answer 1

您可以使用以下语法对事件处理程序进行命名空间 ：

$("#myElement").on("click.myEventHandlerName", function() { ... });

您随时可以通过调用再次删除事件处理程序

$("#myElement").off("click.myEventHandlerName", "#myElement");

Answer 2

作为演示，我构建了我认为您要实现的目标的简化版本。

我正在使用此答案中描述的“ event.target”方法。

由于您使用的是CSS转换，因此我使用jQuery使用此处找到的方法来检测这些转换的结束。

我给所有盒子都分配了一个“ animbox”类，以便它们都可以作为一个组引用。 我还为每个框指定了自己的ID，以便可以使用CSS分别设置其样式。

我对代码进行了注释，以试图解释发生了什么。

 // define all box elements var $allBoxes = jQuery('.animbox'); // FUNCTION TO SHOW A SELECTED BOX function showBox($thisBox) { $allBoxes.hide(); // hide all boxes $thisBox.show().addClass('animateSlide'); // show and animate selected box $('div.login', $thisBox).text("Go Back"); // change the selected box's link text } // FUNCTION TO RETURN BOXES TO THE DEFAULT STATE function restoreDefaultState() { var $thisBox = jQuery('div.animbox.animateSlide'); // identify an open box if ($thisBox.length) { // if a box is open... $thisBox.removeClass('animateSlide'); // close this box $thisBox.one('webkitTransitionEnd'+ ' otransitionend'+ ' oTransitionEnd'+ ' msTransitionEnd'+ ' transitionend', function(e) { // when the box is closed... $allBoxes.show(); // show all boxes $('div.login', $thisBox).text("Start Animation"); // change the link text }); } } // CLICK HANDLER FOR ALL "login" TRIGGERS $('div.login').click(function(e) { var $thisBox = $(this).closest('div.animbox'); // identify clicked box if (!$thisBox.hasClass('animateSlide')) { // if the box is not open... showBox($thisBox); // open it } else { // otherwise... restoreDefaultState(); // restore the default state } }); // CLICK HANDLER TO RESTORE DEFAULT STATE WHEN CLICK HAPPENS OUTSIDE A BOX $('body').click(function(evt) { if ($(evt.target).hasClass('animbox') || // if a box is clicked... $(evt.target).closest('div.animbox').length > 0) { // or a child of a box... return; // cancel } restoreDefaultState(); // restore the default state }); 

 div.container-fluid { background-color: #464646; } .v-center { display: table; height: 100vh; } .content { display: table-cell; vertical-align: middle; text-align: center; } .patientAccess { transition: all .5s; background: white; height: 200px; width: 90%; position: absolute; opacity: 0.7; margin-top: -100px; } .patientAccess p { font-size: 1.5em; font-weight: bold; } div.animbox { transition: all .5s; position: absolute; cursor: pointer; width: 90%; height: 100px; opacity: 0.7; } div#animbox1 { background: #e76700; } div#animbox2 { background: #74b8fe; } div#animbox3 { background: #848484; } div.login { color: white; font-size: 1em; cursor: pointer; } div#animbox1.animateSlide { width: 200px; height: 300px; margin-left: 100px; opacity: 1; } div#animbox2.animateSlide { width: 250px; height: 450px; margin-left: -25px; margin-top: -150px; } div#animbox3.animateSlide { width: 150px; height: 150px; opacity: .5; margin-left: -100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row-fluid"> <div class="col-xs-12 v-center"> <div class="content text-center"> <div class="col-xs-2 animated slideInRight "></div> <div class="col-xs-2 animated slideInRight "> <div class="patientAccess"> <p>Patient Resource Access</p> </div> </div> <div class="col-xs-2 animated slideInRight"> <div class="animbox" id="animbox1"> <div class="login">Start Animation</div> <div class="loginform_hidden "></div> </div> </div> <div class="col-xs-2 animated slideInRight"> <div class="animbox" id="animbox2"> <div class="login">Start Animation</div> <div class="registrationform_hidden"></div> </div> </div> <div class="col-xs-2 animated slideInRight"> <div class="animbox" id="animbox3"> <div class="login">Start Animation</div> </div> </div> </div> </div> </div> </div>