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

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

我正在使用＆＃34; event.target＆＃34; coding conventions中描述的方法。

由于您正在使用CSS过渡，我使用jQuery使用找到的this answer方法检测这些过渡的结束。

我给了所有的盒子一个＆＃34; animbox＆＃34;这样他们就可以作为一个群体被引用。我还为每个盒子分配了自己的ID，因此可以使用CSS单独设置样式。

我已经对代码进行了评论，试图解释发生了什么。

＆＃13;

// 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

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

通过点击外部来关闭div时会遇到麻烦

2 个答案: