javascript - 通过单击外部关闭 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

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

我正在使用 this answer 中描述的“event.target”方法.

由于您使用的是 CSS 转换，我正在使用 jQuery 来使用找到的方法检测这些转换的结束 here .

我给所有的盒子都赋予了一个“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>