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>

Answer 2

您可以使用jquery的slideToggle。

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

    <script> 
function toggle() {
    $("#toggleText").slideToggle(250);
} 
</script>

检查http://jsfiddle.net/fex229bk/

Answer 3

如果你可以使用jQuery，它们有一个方便slide function，可以为你切换带幻灯片动画的元素。如果您想在没有外部库的情况下执行此操作，可以查看this question中的答案。

Answer 4

希望这会有所帮助。尝试将此jQuery代码放在脚本标记中

$('#displayText').('click',function(){
     $('#toggleText').toggle(2000);//2000 milliseconds for effect to finish.
});

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

4 个答案: