jquery - 使用 jQuery 切换类

Question

我这里有一个弹出元素:

<div id="contactme" class="closed"> 
   <a href="javascript:void(0);" onclick="toggle_contactme">Close</a>       
</div>
<a href="javascript:void(0);" onclick="toggle_contactme">Open</a>

我制作了两个类 .open 和 .closed，每个类都带有 css:

.closed{
  visibility: hidden;
}
.open{
  visibility: visible;
}

使用 jQuery 我发现打开和关闭弹出窗口时出错，我不确定是 CSS 还是 jQuery 不正确。

点击打开或关闭按钮时的函数如下:

function toggle_contactme(){

   if ($("#contactme").hasClass("closed")) {

       $("#contactme").removeClass("closed").addClass("open");

   }else if ( $("#contactme").hasClass("open") ){

       $("#contactme").removeClass("open").addClass("closed");

   };

}

运行此代码时，它会打开弹出窗口但无法关闭它，我们将不胜感激!

fiddle :http://jsfiddle.net/ZXCEv/

Answer 1

要完全隐藏和显示元素，您不应使用 visibility: hidden;。当然，它隐藏了元素，但它仍然占据着空间。您想要使用 display: none; 来完全隐藏元素。 jQuery 有这个调用的函数 .hide和 .show()这将设置/取消设置元素的 display 值。

在这种情况下，由于您希望在两种状态之间切换，请查看 .toggle()正是这样做的功能。

工作示例:http://jsfiddle.net/ZXCEv/1/

编辑:对于动画版本，查看 .fadeOut() , .fadeIn()和 .fadeToogle() .

工作示例(动画):http://jsfiddle.net/ZXCEv/3/

HTML

<a href="#" class="hidden">Close</a>
<a href="#">Open</a>

CSS

.hidden {
    display: none;
}

jQuery

$(function() {

    $('a').click(function() {

        // $('a').toggle(); // Unanimated
        $('a').fadeToggle(); // Animated

    });

});