Javascript 如何淡出（）使两个元素淡出（）后再次单击按钮时可见的两个元素？

HTML:

<div id="menu">
    <div id="img"></div>
    <div>Gallery</div>
    <div>Stats</div>
    <div>Members</div>
    <div id="groupme">GroupMe</div>
    <div id="knd">K&amp;D</div> <!-- When I click this "button", the id "#kndpopup" becomes visible. --> 
    <div>Apply</div>
</div>
<div class="popup" id="guildinfo"> <!-- this is the second element that is toggled when the user clicks on "guild info >>" (if you look under the list section) -->
    <span class="info">Back to wars >></span>
</div>
<div id="kndpopup" class="popup"> <!-- this is the first element that toggles -->
    <h3>Knights & Dragons - Wars</h3>
    <ul>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
        <li>1/7 80th place</li>
    </ul>
    <span class="info">Guild info >></span> <!-- clicking on this toggles the second element. -->
    <span id="previous">
    <a href="previouswars.html">Click here to see all previous wars</a>
    </span>
</div>
<!--End of popupwarsdiv-->

$("#knd").click(function () {

    var KND = $("#kndpopup");
    var GUILDINFO = $("#guildinfo");

    if ((KND).is(':hidden')) {
        $(KND).fadeIn();
    } else if ((GUILDINFO).is(':visible')) {
        $(GUILDINFO).fadeOut();
        $(KND).fadeToggle();
    } else {
        $(KND).fadeOut();
    }

});

$(".info").click(function () {
    $("#kndpopup").fadeToggle();
    $("#guildinfo").fadeToggle();
});

---

当我在两个元素都可见后单击按钮时，我想淡出（

#kndpoop

和

#guildinfo

），但当它在

#guildinfo

页面上，我单击

#knd

按钮时，它会返回到

#kndpoop

页面，然后我必须再次单击按钮关闭它。如何解决这个问题？

好的，我只知道

但是当它出现在#guildinfo页面上，我点击#knd按钮时 返回到#knd弹出页面，然后我必须单击按钮 再次关闭它

基于此

  $("#knd").click(function () {
     var KND = $("#kndpopup");
     var GUILDINFO = $("#guildinfo");

    if ((KND).is(':visible')) {
        $(KND).fadeOut();
    } else if ((GUILDINFO).is(':visible')) {
       $(GUILDINFO).fadeOut();
       $(KND).fadeOut();
    } else {
      $(KND).fadeIn();
   }
});

$(".info").click(function () {
    $("#kndpopup").fadeToggle();
    $("#guildinfo").fadeToggle();
}); 

这就是你要找的吗？

---

不完全确定您想做什么，描述把我弄糊涂了。这个脚本在2页还是1页隐藏元素上工作？1页显示：无；在2个元素上，当用户单击按钮时，其中一个元素将切换，然后在该元素内是一个可以单击的元素，然后第二个元素将取代第一个元素。如果再次单击，则返回到第一个元素。但是当用户看到第二个元素并单击按钮时，我希望这两个元素都恢复为不可见。现在更好地理解了吗？你能发布这部分的html吗？很难分辨哪个元素是js Only中的哪个元素。你能用哪个元素更新问题吗？点击做什么？有点像您的注释，但更具体的是在代码中添加了元素id或classI注释，希望您现在能够理解它。