javascript - 如何在淡入淡入()后再次单击按钮时淡出()两个可见的元素？

Question

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

JQUERY:

$("#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();
});

当我在两个元素可见后单击按钮时，我想将 #kndpopup 和 #guildinfo 淡出()，但当它位于 #guildinfo 上时 页面，我单击 #knd 按钮，它返回到 #kndpopup 页面，然后我必须再次单击该按钮才能将其关闭。如何解决这个问题？

Answer 1

好吧，我只明白

but when it's on the #guildinfo page and I click on the #knd button it goes back to the #kndpopup page and then I have to click the button again to close it

基于此

  $("#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();
}); 

这就是你要找的吗？ http://jsfiddle.net/58LYm/