Question

我想问的是，是否有可能编写关闭当前弹出窗口的JavaScript，是否可以打开另一个弹出窗口。

我有5个项目，具有不同的弹出窗口，就像在HTML中看到的一样（用于演示目的只有2个项目）-如果我不关闭当前打开的项目，它将保持打开状态。我想在打开另一个项目时关闭当前打开的项目。

$(function() {
  $(".item-details").click(function(e) {
    $(this).children(".details-content").fadeIn(1000);
    return false;
  });
  $(".close-content").click(function() {
    $(this).parent(".details-content").fadeOut(1000);
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-details item-1">
  <span class="icon">
    <img src="assets/images/icons/icon.svg" alt="icon">
  </span>
  <div class="details-content">
    <a class="close-content">&times;</a>
    <h3>head</h3>
    <p>some amazing text</p>
  </div>
</div>
<div class="item-details item-2">
  <span class="icon">
    <img src="assets/images/icons/icon.svg" alt="icon">
  </span>
  <div class="details-content">
    <a class="close-content">&times;</a>
    <h3>head</h3>
    <p>some amazing text</p>
  </div>
</div>

Answer 1

首先，您必须为项目分配唯一的标识符。
然后，您可以将内容订阅这样的事件。

示例

$(function () {
    $(".item-details").click(function (e) {
        $(this).children(".details-content").trigger("show-content");
        let currentId = $(this).attr('id');
   
        $(".item-details").each(function () {
          let id = $(this).attr('id');

            if (id != currentId) {
            let content = $(this).children(".details-content").trigger("close-content");
          }
        });
        return false;
    });

    $(".close-content").click(function () {
        $(this).parent(".details-content").trigger("close-content");
        return false;
    });
    
    $(".details-content").on("show-content", function() {
      $(this).fadeIn(1000)
    });
    
    $(".details-content").on("close-content", function() {
      $(this).fadeOut(1000)
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item-1" class="item-details">
    <span class="icon">
        <img src="assets/images/icons/icon.svg" alt="icon">
    </span>
    <div class="details-content">
        <a class="close-content">&times;</a>
        <h3>head</h3>
        <p>
            some amazing text
        </p>
    </div>
</div>

<div id="item-2" class="item-details">
    <span class="icon">
        <img src="assets/images/icons/icon.svg" alt="icon">
    </span>
    <div class="details-content">
        <a class="close-content">&times;</a>
        <h3>head</h3>
        <p>
            some amazing text
        </p>
    </div>
</div>

Answer 2

我将如何做：

隐藏所有弹出窗口，然后再打开一个新窗口。

编辑：

如果我将我的答案与sina_r的答案结合在一起，我想这会给您最好的结果：

$(function () {
    $(".item-details").click(function (e) {
        if (!$(this).children(".details-content").is(':visible')){
            $("details-content").hide();
            $(this).children(".details-content").fadeIn(1000);
        }
        return false;
    });

    $(".close-content").click(function () {
        $(this).parent(".details-content").fadeOut(1000);
        return false;
    });
});

我希望这对您有帮助

Answer 3

您需要做两件事：

检查您单击的pop up的“详细内容”是否可见，以便在双击同一pop up时不会关闭它。
Hide所有其他“详细内容” on click

$(function () {
    $(".item-details").click(function (e) {
        if ($(this).children(".details-content").is(":visible")){
            $(this).children(".details-content").fadeIn(1000);
        }else {
            $(".details-content").hide();
            $(this).children(".details-content").fadeIn(1000);
        }
    });

    $(".close-content").click(function () {
        $(this).parent(".details-content").fadeOut(1000);
        return false;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <div class="item-details item-1">
            <span class="icon">
                <img src="assets/images/icons/icon.svg" alt="icon">
            </span>
            <div class="details-content">
                <a class="close-content">x</a>
                <h3>head 1</h3>
                <p>
                    some amazing text 1
                </p>
            </div>
        </div>
        
        <div class="item-details item-2">
            <span class="icon">
                <img src="assets/images/icons/icon.svg" alt="icon">
            </span>
            <div class="details-content">
                <a class="close-content">x</a>
                <h3>head 2</h3>
                <p>
                    some amazing text 2
                </p>
            </div>
        </div>

在clic上打开另一个弹出窗口时，关闭当前弹出窗口

3 个答案:

示例