Закрыть текущее всплывающее окно при открытии другого всплывающего окна при нажатии

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

Есть две вещи, которые вам нужно сделать:

1. Проверьте, виден ли «подробный контент» pop up, который вы нажимаете, чтобы не закрывать его в случай двойного щелчка по тому же pop up.

2. 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>

Answer 3

Как бы я это сделал:

скрыть все ваши всплывающие окна, прежде чем открывать новое.

Редактировать:

если я объединить мой ответ с ответом 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;
    });
});

Надеюсь, это полезно для вас