单击元素时 div 淡入

Question

>我有多个链接，每个链接都有它的浮出控件，当单击链接时，浮出控件会淡入，再次单击时，浮出控件会淡出。但是，当我需要浮出控件保持隐藏/不可见时，我会让浮出控件淡入。

我已经走得很远了，但我只需要一点点推动，我无法弄清楚缺少什么。

如何使浮出控件在再次单击其相应链接以隐藏后保持隐藏/不可见？

//Variables
var trigger = $(".trigger");
var flyout = $(".flyout");
var close = $(".close-btn");
$(function() {
  $(trigger).click(function(e) {
    //Hide any other flyout that's visible
    $(this).parents().find(flyout).fadeOut("fast");
    //Toggle active class
    $(this).next(flyout).toggleClass("is-active");
    //Display/hide an actual flyout
    $(this).next(flyout).fadeToggle("fast");
    e.stopPropagation();
  });
  //Fade out the flyout when clicking on the Close button
  $(close).click(function(e) {
    $(this).parent(flyout).fadeToggle("fast").removeClass("is-active");
    e.stopPropagation();
  });
  //Fade out the flyout when clicking anywhere on the page
  $(document).click(function(e) {
    if ($(e.target).closest(flyout).length === 0) {
      $(flyout).fadeOut("fast", function() {
        //Remove class after animation is finished
        $(this).removeClass("is-active");
      });
    }
  });
  //Fade out the flyout when pressing the ESC key
  $(document).keydown(function(e) {
    if (e.keyCode === 27) {
      $(flyout).fadeOut("fast", function() {
        //Remove class after animation is finished
        $(this).removeClass("is-active");
      });
    }
  });
});

.flyout {
  display: none;
  padding: 20px;
  position: relative;
  background: #eee;
}
.close-btn {
  display: flex;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  position: absolute;
  top: 5px;
  right: 5px;
  text-decoration: none;
  background: #999;
  color: white;
}
.is-active {
  box-shadow: 0 0 0 1px red;
}
/*Styles not needed for demo*/
.flyout-module {
  float: left;
  width: 200px;
  margin-right: 10px;
  overflow: visible;
}
p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flyout-module">
  <a href="#" class="trigger">Link</a>
  <div class="flyout flyout-tags">
    <p>content goes here</p>
    <p>content goes here</p>
    <p>content goes here</p>
    <a href="#" class="close-btn" title="Close"><span>×</span></a>
  </div>
</div>
<div class="flyout-module">
  <a href="#" class="trigger">Link</a>
  <div class="flyout flyout-tags">
    <p>content goes here</p>
    <p>content goes here</p>
    <p>content goes here</p>
    <a href="#" class="close-btn" title="Close"><span>×</span></a>
  </div>
</div>
<div class="flyout-module">
  <a href="#" class="trigger">Link</a>
  <div class="flyout flyout-tags">
    <p>content goes here</p>
    <p>content goes here</p>
    <p>content goes here</p>
    <a href="#" class="close-btn" title="Close"><span>×</span></a>
  </div>
</div>

这里有一个小提琴：https://jsfiddle.net/rzea/hn9cdf34/25/

谢谢。

Answer 1

我解决了这个问题。

这是一个正确"穿越"DOM的问题。

正如我上面提到的，我需要将触发器元素"外部"移到其父容器，然后查找该容器的同级，并在内部查找浮出控件并将其淡出。

这是修复：

//Hide any other flyout that's visible
$(this).parent().siblings().find(flyout).fadeOut("fast", function(){
    //Remove class after animation is finished
  $(this).removeClass("is-active");
}); 

不起作用的旧行如下所示(仅供参考(：

$(this).parents().find(flyout).fadeOut("fast");

这是固定的小提琴：https://jsfiddle.net/rzea/hn9cdf34/37/

多亏了@camainc，他的回答激发了我想出修复:)