Question

我想创建一个单页网站，点击按钮，impressum-div将淡入。另一个点击同一个按钮，然后fadeOut impressum-div。

我已经设法让它在点击时淡入div。但是当我尝试使用“if”时，整个事情就不再适用了。我已经在这里找到了一些tipps并试了一下，但没有什么对我有用..

这是我的脚本代码：

<script type="text/javascript">
     $(document).ready(function() {
         function display() {

             if (document.getElementById("impressum").style=="none") {
                 $('#impressum').fadeIn();
             }
             if (document.getElementById("impressum").style=="block") {
                 $('#impressum').fadeOut();
             }
         }
     });
</script>

我在几个版本中尝试了这个（使用.click（）等等），所以这可能是完全错误的。

这是我的HTML代码：

<input type="button" id="iButton" value="Impressum" onclick="javascript:display()"/> 

       <div id="impressum" style="display:none">

       <p>Here Impressum</p></div>

非常感谢帮助，如果您可以发布一个完整的功能，那将是最好的，因为我只是将各个部分放在一起..

问候

Answer 1

只需使用fadeToggle（）

<input type="button" id="iButton" value="Impressum" onclick="javascript:display()" />
<div id="impressum" style="display:none">
    <p>Here Impressum</p>
</div>

然后

$(document).ready(function () {
    $('#iButton').click(function () {
        $('#impressum').stop(true).fadeToggle();
    })
});

演示：Fiddle

Answer 2

HTML

<div id="impressum" style="display:none">
    <p>Here Impressum</p>
</div>

的JavaScript

$('#iButton').click(function () {
    $('#impressum').stop(true).fadeToggle();
});

小提琴：http://jsfiddle.net/xKpLe/

Answer 3

您无法检索display这样的值，您需要使用 window.getComputedStyle ：

var elem = document.getElementById("impressum"),
    display = window.getComputedStyle(elem,null).getPropertyValue("display");

<强> Fiddle Demo

Answer 4

/* 1: <div onclick="display(this);"></div>*/
var display = function(elm){
  var status = G(elm).attrib('data-display')||'false';

    if(status=='false'){ 
        G(elm).css({display:'block'});
        G(elm).attrib('data-display', 'true');
        return false;}

    if(status=='true'){ 
        G(elm).css({display:'none'});
        G(elm).attrib('data-display', 'false');
        return false;}

    };



    /* 2 */
    /* elm.onclick = display;*/
var display = function(ev){
    var elm = this||G(ev).source(); //Choice
    var status = G(elm).attrib('data-display')||'false';

    if(status=='false'){ 
        G(elm).css({display:'block'});
        G(elm).attrib('data-display', 'true');
        return false;}

    if(status=='true'){ 
        G(elm).css({display:'none'});
        G(elm).attrib('data-display', 'false');
        return false;}

    };

On Same Button-Click，Div fadeOut和fadeIn

4 个答案: