代码之家 › 专栏 › 技术社区 › Kyle Underhill

有条件的移除类

html jquery javascript

Kyle Underhill · 技术社区 · 6 年前

如果你 click 任何一个图像都是独一无二的 modal 为每个显示。

我使用了一个函数,如果你点击离开,它会隐藏苹果模式。

如果我单击任何 .alt-btn 是吗?

$(document).on("click", function(e) {
  if (
    $(".apple-modal").hasClass("active") &&
    !$(".modal, .modal *, .button").is(e.target)
  ) {
    $(".modal").removeClass("active");
  }
});

$("[data-close]").click(function(e) {
  const dataClose = $(this).attr("data-close");
  const elem = $('[data-id="' + dataClose + '"]').length ?
    $('[data-id="' + dataClose + '"]') :
    $(dataClose);
  if (elem.hasClass("active") && elem.is(":visible")) {
    elem.removeClass("active");
    e.stopImmediatePropagation();
  }
});
$(".button").on("click", function() {
  const id = $(this).prop("id");
  $(".modal").each(function() {
    $(this).toggleClass("active", $(this).data("id") == id);
  });
});
$(document).on("click", function(e) {
  if (
    $(".apple-modal").hasClass("active") &&
    !$(".modal, .modal *, .button").is(e.target)
  ) {
    $(".modal").removeClass("active");
  }
});

.button {
  height: 30px;
  cursor: pointer
}

.header {
  height: 15px;
  background: #eee;
}

.modal {
  position: fixed;
  top: 72px;
  right: 15px;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transform-origin: top right;
  transition: 0.15s;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.modal:after {
  content: "";
  width: 15px;
  height: 15px;
  background: inherit;
  position: absolute;
  background: #eee;
  top: -6px;
  right: 8px;
  opacity: 0;
  visibility: hidden;
  transform: rotate(45deg) scale(0.5);
  transition: 0.15s;
}

.modal.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.modal.active:after {
  opacity: 1;
  visibility: visible;
  transform: rotate(45deg) scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" data-close="apple" />
<div class="modal" data-id="google">
  <div class="header">Google</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>
<div class="modal apple-modal" data-id="apple">
  <div class="header">Apple</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>
<button class="alt-btn">Keep Open</button>
<button class="alt-btn">Keep Open</button>

1 回复 | 直到 6 年前

Pati 6 年前

您只需在此处添加“.alt btn”:

if ($(".apple-modal").hasClass("active") &&
    !$(".modal, .modal *, .button, .alt-btn").is(e.target))
{
    if(!$(".apple-modal").hasClass("keep-active"))
        $(".modal").removeClass("active");
}

以下是工作示例:

$("[data-close]").click(function(e) {
  const dataClose = $(this).attr("data-close");
  const elem = $('[data-id="' + dataClose + '"]').length ?
    $('[data-id="' + dataClose + '"]') :
    $(dataClose);
  if (elem.hasClass("active") && elem.is(":visible")) {
    elem.removeClass("active");
    e.stopImmediatePropagation();
  }
});
$(".button").on("click", function() {
  const id = $(this).prop("id");
  $(".modal").each(function() {
    $(this).toggleClass("active", $(this).data("id") == id);
  });
});
$(document).on("click", function(e) {
  if (
    $(".apple-modal").hasClass("active") &&
    !$(".modal, .modal *, .button, .alt-btn").is(e.target)
  ) {
    $(".modal").removeClass("active");
  }
});

.button {
  height: 30px;
  cursor: pointer
}

.header {
  height: 15px;
  background: #eee;
}

.modal {
  position: fixed;
  top: 72px;
  right: 15px;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transform-origin: top right;
  transition: 0.15s;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.modal:after {
  content: "";
  width: 15px;
  height: 15px;
  background: inherit;
  position: absolute;
  background: #eee;
  top: -6px;
  right: 8px;
  opacity: 0;
  visibility: hidden;
  transform: rotate(45deg) scale(0.5);
  transition: 0.15s;
}

.modal.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.modal.active:after {
  opacity: 1;
  visibility: visible;
  transform: rotate(45deg) scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" data-close="apple" />
<div class="modal" data-id="google">
  <div class="header">Google</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>
<div class="modal apple-modal" data-id="apple">
  <div class="header">Apple</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>
<button class="alt-btn">Keep Open</button>
<button class="alt-btn">Keep Open</button>

编辑:==& gt;

这不是问题。我以为你要在第二次按下开门按钮时把它关上。如果不需要关闭,则必须移除。

data-close="apple"

从

<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" data-close="apple" />

请参见下面的代码示例:

$(“[数据关闭]”)。{
const data close=$(this).attr(“数据关闭”);
const elem=$('[数据ID=“'+dataclose+'”]')。长度?
$('[数据ID=“'+DataClose+'”]):
$(DATACLIVE);
if(elem.hasClass(“活动”)&elem.is(“:可见”)){
elem.removeClass(“活动”);
e.stopImmediatePropagation();
}
(});
$(“.button”).on(“单击”,function()。{
const id=$(this).prop(“id”);
$(“.modal”).each(function()。{
$(this).toggleClass(“活动”,$(this).data(“id”)==id);
(});
(});
$(document).on(“单击”,函数(e){
如果(
$(“.apple modal”).hasClass(“活动”)&&
!$(“.modal、.modal*,.button、.alt btn”).is(e.target)
{
$(“.modal”).removeClass(“active”);
}
(});

按钮{
高度:30px;
指针:指针
}

标题{
高度:15px;
背景:eee;
}

模态{
位置:固定;
顶部:72Px;
右:15PX;
Z指数:6;
不透明度:0;
可见性:隐藏;
变换:比例(0.5);
变换原点:右上角;
过渡:0.15s;
盒影:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);
}

模态:{后
内容:“
宽度:15px;
高度:15px;
背景:继承;
位置:绝对;
背景:eee;
顶部:-6PX;
右:8PX;
不透明度:0;
可见性:隐藏;
变换:旋转(45度)刻度(0.5);
过渡:0.15s;
}

模态{激活}
不透明度:1;
能见度:可见;
变换:比例(1);
}

.模式.活动:之后{
不透明度:1;
能见度:可见;
变换:旋转(45度)比例(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button test" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="test button" id="apple" />
<div class="modal" data-id="google">
  <div class="header">Google</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>
<div class="modal apple-modal" data-id="apple">
  <div class="header">Apple</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>
<button class="alt-btn">Keep Open</button>
<button class="alt-btn">Keep Open</button>