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

我想在两个元素都可见后单击按钮时fadeOut（）#kndpopup和#guildinfo，但是当它出现在#guildinfo页面上时我点击了在#knd按钮上，它会返回到#kndpopup页面，然后我必须再次单击该按钮才能将其关闭。如何解决这个问题？

Answer 1

好的，我理解的是

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

基于那个

  $("#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/

如何fadeOut（）在使它们成为fadeIn（）之后再次单击按钮时可见的两个元素？

1 个答案: