javascript - 单击超链接后滑动和取消滑动 div 组件

Question

我有以下 html 代码:

<a id="displayText" href="javascript:toggle();">Show everything</a>
<div id="toggleText" style="display: none">
    <input type="text" value="" class="css-input" id="inputName">
    <input type="button" id="mynewbutton" value="click me"/>
</div>

并附加了 javascript:

<script> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Show everything";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide everything";
    }
} 
</script>

这很有效，当我单击显示所有内容 按钮时，我看到按钮和输入，并且文本更改为隐藏所有内容。问题是它只是出现在屏幕上，我想在这里做滑动效果，点击文本后用户会看到向下滑动的组件。我怎样才能做到这一点？

Answer 1

您可以使用 jQuery 中的 .slideToggle() 实现这一点。

工作代码片段:

var displayText = $("#displayText");

function toggle() {
  
  $("#toggleText").slideToggle("fast", "swing", function(){  // toggle with sliding animation
    
    if(displayText.text() === "Show everything"){  // toggle the anchor text after first toggle is complete
      displayText.text("Hide everything");
    } else {
      displayText.text("Show everything");
    }
    
  });
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="displayText" href="javascript:toggle();">Show everything</a>
<div id="toggleText" style="display: none">
  <input type="text" value="" class="css-input" id="inputName">
  <input type="button" id="mynewbutton" value="click me"/>
</div>