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>

我已经用css创建了两个类 .open 和 .closed ：

.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");

   };

}

运行此代码时，它会打开弹出窗口但无法关闭它，任何帮助都将不胜感激！

小提琴：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

    });

});

Answer 2

您可能还需要更改Open / Close按钮文字
我建议你以更动态的方式做到这一点：

<强> jsBin demo

<div data-togglable="contactme" data-hidden> 
    <a href="#" data-toggler="contactme"></a>
    <p>lorem ipsum.....</p>
</div>
<a href="#" data-toggler="contactme"></a>

只需删除data-hidden，看看会发生什么。
是的，您无需编写按钮打开/关闭文本。 jQuery会为你处理它

CSS：

[data-hidden]{ display:none; }

JQ：

// 1. Set the needed text for the element's related buttons
// Iterate all your elements with "data-togglable" 
// and find out the needed text for that element's related buttons
$('[data-togglable]').each(function(){      
    var dataTarget = $(this).data('togglable');
    var $targetBtn = $('[data-toggler='+ dataTarget +']');
    var togglerTxt = typeof $(this).data('hidden') !== 'undefined' ? "Open" : "Close";
  $('[data-toggler='+ dataTarget +']').text( togglerTxt );
});

// 2. Assign a click handler to your buttons
// and change state/text
$('[data-toggler]').click(function(event){      
    event.preventDefault(); 
    var dataTarget = $(this).data('toggler');
    var $targetEle = $('[data-togglable='+ dataTarget +']');
    var togglerTxt = $targetEle.is(':hidden') ? "Close" : "Open";
    $targetEle.slideToggle();
    $('[data-toggler='+ dataTarget +']').text( togglerTxt );
});

Answer 3

变化：

onclick="toggle_contactme"

要：

onclick="toggle_contactme()" // missing () after the function name

JSFiddle

Answer 4

只需将您的HTML更改为此

即可

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

使用jQuery切换类

4 个答案: