Javascript 单击下一个弹出窗口时，第一个弹出窗口不会关闭

我希望弹出窗口一次只出现一个，不管有多少个弹出窗口。因此，如果一个弹出窗口当前打开，它将关闭，新弹出窗口将保持打开状态。我目前已经对它们进行了编码，这样初始链接将打开和关闭弹出窗口，用户应该能够在打开弹出窗口后单击文档中的任何位置来关闭弹出窗口

我有一把叉子

我在使用此代码时遇到的问题：

1.如果选择了其他弹出窗口，则单击的第一个弹出窗口不会消失
2.如果单击初始链接以外的任何位置以关闭该链接，则必须双击该链接以使弹出窗口重新出现
3.所有弹出窗口最初都应关闭

HTML:

<div id="link"><a href="#" class="showPopup" rel="one"> One</a></div>
<div class="popup popup_hide" id="one">Content</div>

<div id="link"> <a href="#" class="showPopup" rel="two"> Two</a></div>
<div class="popup popup_hide" id="two">Content <a href="#">link</a></div>

<div id="link"> <a href="#" class="showPopup" rel="three"> Three</a></div>
<div class="popup popup_hide" id="three">Content <a href="#"></a></div>

jQuery(document).ready(function() {

var popupStatus = 0;

if (popupStatus == 0) { // if value is 0, show popup
        $('.showPopup').click(function () {
            $('#' + $(this).attr('rel') + '_img').removeClass('border_grey');
            if ($(this).hasClass("selected")) {
                $('#' + $(this).attr('rel')).hide();
                $(this).removeClass("selected");
            } else {
                $(this).addClass("selected");
                $('#' + $(this).attr('rel') + '_img').addClass('border_grey');
                $('#' + $(this).attr('rel')).show();
                popupStatus = 1; 
            }

         return false;
        });

    }
 else if (popupStatus == 1){
         $('.popup').hide();
         popupStatus = 0;
    }

    $('.hide_popup').click(function () {
        $('img').removeClass('border_grey');
        $('.popup').hide();
        return false;
    });

    $(document).click(function (e) {
        if (e.target.class !== 'popup_hide') {
            $('.popup_hide').hide();
        }
    });

---

})；//jQuery End首先要提到的是，您应该修改html，因为它包含同名的Id，而不应该是同名的，因为元素Id应该是唯一的

我不确定这是否是您正在寻找的，但我更新了您的代码一点，所以这可能是您的一些起点

HTML

---

最好的

这可能会满足您的需求：

---

我试图避免使用ID，因为它们会根据页面和应用程序的不同而变化。我希望把它放在课堂上，这样它就可以在任何地方使用。啊，好吧，我不知道这一点，但已经有一个合适的答案：）

<div id="link1"> 
    <a href="#" class="showPopup" rel="popup_brain"> hello</a>
</div>
<div class="popup popup_hide" id="popup_brain">Content</div>
<div id="link2"> <a href="#" class="showPopup" rel="heart"> Goodbye</a> 
</div>
<div class="popup popup_hide" id="heart">Content <a href="#">hi</a></div>

jQuery(document).ready(function(){

  $('.popup_hide').hide()

  $('#link1').click(function(){
          $('#popup_brain').show()
          $('#heart').hide()
  })

  $('#link2').click(function(){
          $('#heart').show()
          $('#popup_brain').hide()
  })

})

var rr, popupStatus = 0;

$('.popup').hide();

$('.showPopup').click(function (e) {
    rr = $(this).attr('rel');
    $('.popup').hide();
    $('#' + rr).show();
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    if (e.target.class !== 'popup_hide' && e.target.class !== 'showPopup') {
        $('.popup_hide').hide();
    }
});