在同一按钮上单击时，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();
    })
});

演示：小提琴