javascript - jQuery - 不使用 stopImmediatePropagation() 切换菜单；

Question

目前，当我取消注释 e.stopImmediatePropagation(); 时，该代码片段仅允许切换每个菜单。

问题是我无法使用 e.stopImmediatePropagation(); 因为我必须在 .button 上使用动画，该动画会被停止杀死。

如何更改代码以便能够像使用 e.stopImmediatePropagation(); 时那样切换菜单，但不必使用它。

To emulate problem: Click the Apple or Google logo (or Bell Icon) and then click it again. The solution should remove .active from it's associated .modal and it should close just like it does when clicking document (except for Bell Icon button which isn't set up to close when document is clicked). I just don't know how to acheive this without using e.stopImmediatePropagation();

$("[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, .google-modal").hasClass("active") &&
    !$(".modal, .modal *, .button").is(e.target)
  ) {
    $(".modal").removeClass("active");
  }
});

.buttons {
  display: flex;
  align-items: center;
}

.button {
  height: 30px;
  cursor: pointer;
  border: 2px solid;
  padding: 1rem;
  font-size: 28px;
}

#icon {
  color: silver;
}

.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://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
  <img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" 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="button" id="apple" data-close="apple" />
  <div class="button" id="icon" data-close="icon">
    <i class="fas fa-bell"></i>
  </div>
</div>
<div class="modal google-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>
<div class="modal icon-modal" data-id="icon">
  <div class="header">Icon</div>
  <ul>
    <li>
      First</li>
    <li>
      Second</li>
    <li>
      Third</li>
  </ul>
</div>

Answer 1

我能够通过在单击按钮内添加关闭模态功能来实现您想要的功能，并检查当前元素的模态是否可见:

$(".button").on("click", function () {
  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");
  } else {
    const id = $(this).prop("id");
    $(".modal").each(function () {
      $(this).toggleClass("active", $(this).data("id") == id);
    });
  }
});

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

.buttons {
  display: flex;
  align-items: center;
}

.button {
  height: 30px;
  cursor: pointer;
  border: 2px solid;
  padding: 1rem;
  font-size: 28px;
}

#icon {
  color: silver;
}

.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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
    <img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" 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="button" id="apple" data-close="apple" />
    <div class="button" id="icon" data-close="icon">
        <i class="fas fa-bell"></i>
    </div>
</div>
<div class="modal google-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>
<div class="modal icon-modal" data-id="icon">
    <div class="header">Icon</div>
    <ul>
        <li>
            First
        </li>
        <li>
            Second
        </li>
        <li>
            Third
        </li>
    </ul>
</div>