Question

如何在Javascript （没有jQuery）中从左到右显示/隐藏div

这是我需要的例子（在jQuery中）：http://jsfiddle.net/dRpWv/1/

这是我在jQuery中需要的示例源：

<a href="#" id="button" class="button_style">Show content</a>
<div id="hidden_content">Content</div>

<script>
$(document).ready(function() {
    $("#button").toggle(function() {
        $(this).text('Hide Content');
    }, function() {
        $(this).text('show Content');
    }).click(function(){
        $("#hidden_content").slideToggle("slow");
    });
});
</script>

Answer 1

http://jsfiddle.net/dRpWv/665/

你去吧。使用CSS3 transition来平滑地为幻灯片设置动画（比jQuery可以管理得更顺畅，我可能会添加）。

由于display不可转换，因此它使用height代替overflow:hidden（我认为这是jQuery在内部执行的方式）。使用scrollHeight确定目标身高。

Answer 2

必须自己尝试，甚至不接近Jquery但工作:) http://jsfiddle.net/6MTma/

   function slideToggle() {
       var content = document.getElementById('hidden_content');
       var style = window.getComputedStyle(content);

       style['display'] == 'none' ? slideDown(content) : slideUp(content)
   }
   var btn = document.getElementById('button');
   btn.addEventListener('click', function(){
       slideToggle();
   })

Answer 3

如果按钮具有切换类，则单击该按钮将通过增加其宽度来显示div ...（切换）

<script>
var $block = $( ".block" );
$block.hide();
$( "#toggle" ).on( "click", function() {
$block.stop().slideToggle(1000 );
 $( ".block" ).animate({
width: "700px",
borderWidth: "10px"
}, 1500 );


});
<script>

Answer 4

您可以使用它来隐藏您的元素：

document.getElementById("MyElement").style.display = "none";

要显示元素，您可以将显示设置为阻止：

 document.getElementById("MyElement").style.display = "block";

Answer 5

只需使用普通的onclick处理程序并使用当前状态（显示/隐藏）存储变量：

var displayed = true;
document.getElementById("button").onclick = function() {
    displayed = !displayed; // the toggle part
    if(displayed) {
        document.getElementById("button").innerHTML = "Show content";
    } else {
        document.getElementById("button").innerHTML = "Hide content";
    }
    // perform general onclick action that's unrelated to toggle, e.g. using a CSS3 transition to slide
};

您将了解如何使用Google轻松滑动内容。

如何在Javascript中使用幻灯片显示/隐藏div（不使用jQuery）

5 个答案: