jQuery-多个模式分别处理

Question

如果您单击Apple图标，则会出现模式，然后单击以消失。

如果您单击Google图标，则会出现模式（并设置为不消失）。

目标：点击toggle图标（即显示/隐藏广告的“ active”类别的Google modal的{​​{1}}类谷歌img被单击而不是用户单击时像苹果模式那样被模式化

#google

$('.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;
}

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

Answer 1

您可以添加具有data-close属性的Elements的单击事件侦听器，以在单击Element且选择器获得的元素为时从指定给data-close属性的选择器中删除活动类。可见，并且具有主动性。

$('[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;
}

.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" />
<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>