Question

我的意思是：

如果我单击 OPEN ，则应打开弹出窗口。
如果单击 BACK ，则应关闭弹出窗口
如果我单击外部弹出窗口，则应关闭弹出窗口。

注意：如果在打开时单击弹出窗口内的任何位置，则不应关闭。弹出窗口必须仅在外部单击或 BACK 单击时关闭。

当前工作方式：如果我单击任意位置，则弹出窗口将打开和关闭。

那么我该怎么做呢？我准备了JSFiddle和代码片段。

$('#open-1').on('click touch', function() {
  $("#card-1").toggleClass("flip")
});

$(document).on('click touch', function(event) {
  if (!$(event.target).parents().addBack().is('#open-1')) {
    $("#card-1").toggleClass("flip");
  }
});

$('#open-1').on('click touch', function(event) {
  event.stopPropagation();
});

.panel {
  width: 45%;
  display: inline-block;
  margin-bottom: 20px;
  background-color: #fff;
  margin: 14px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.est {
  box-shadow: 0px 0px 0px #333;
  background-color: transparent;
}

div {
  display: block;
}

#card-1 {
  height: 300px;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
  display: inline-block;
  perspective: 700px;
}

.flip .front {
  transform: rotateY(180deg);
}

.front {
  transform: rotateY(0deg);
  overflow: hidden;
  z-index: 1;
}

.front,
.back {
  border: 1px solid #ddd;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.ease {
  -webkit-transition: all .45s ease-out 0s;
  -moz-transition: all .45s ease-out 0s;
  -ms-transition: all .45s ease-out 0s;
  -o-transition: all .45s ease-out 0s;
  transition: all .45s ease-out 0s;
}

.open-1,
.open-2,
.open-3,
.open-4,
.open-5 {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 50px;
}

.back {
  transform: rotateY(180deg);
  background-color: #ddd;
  display: table;
  z-index: 2;
  font-size: 13px;
  line-height: 23px;
  padding: 10px 20px;
  height: 320px;
}

.info {
  color: #333;
  font-size: 20px;
  z-index: 9999;
}

.flip .back {
    transform: rotateY(360deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="panel e-b est">   <div class="wrapper">
    <div id="card-1">
      <div class="front ease">
        <a href="javascript:void" class="open-1" id="open-1">open</a>
        <p>
          test content
        </p>
      </div>
      <div class="back ease">
        <div class="back-info">
          <div class="info">
            test content
          </div>
        </div>
        <div class="social-bar"><a href="javascript:void" class="open-1">Back</a></div>
      </div>
    </div>   </div> </div>

JSFiddle

Answer 1

$(document).on('click touch', function(event) {
  if (!$(event.target).parents().addBack().is('#open-1')) {
    $("#card-1").toggleClass("flip");
  }
});

您正在toggle()在这里上课，而使用removeClass()：

$(document).on('click touch', function(event) {
  if (!$(event.target).parents().addBack().is('#open-1')) {
    $("#card-1").removeClass("flip");
  }
});

然后选择翻转的div而不是前一个div，以在用户单击翻转的div时停止切换

$('.back.ease').on('click touch', function(event) {
  event.stopPropagation();
});

然后将一个类（例如close-1）添加到back按钮：

<a href="#" class="open-1 close-1">Back</a>

然后添加一个函数，以在单击该类后删除flip类

$('.close-1').on('click touch', function() {
    $("#card-1").removeClass("flip");
});

如何使用动画隐藏外部点击时的弹出窗口

1 个答案: