javascript - 在同一按钮上单击，Div 淡出和淡入

Question

我想创建一个单页网站，单击按钮时 impressum-div 将淡入。再次单击同一按钮将使 impressum-div 淡出。

我已经设法让它在点击时淡入div。 但当我尝试使用“如果”时，整个事情就不再起作用了。 我已经在这里找到了一些提示并尝试了所有这些，但没有什么真正对我有用..

这是我的脚本代码:

<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