如何在Javascript中显示/隐藏从左到右滑动的div (不含jQuery)
这是我需要的例子(在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>
http://jsfiddle.net/dRpWv/665/
给你。使用CSS3 transition
平滑地动画幻灯片(我可能会补充说,比jQuery更平滑)。
由于display
是不可转换的,它使用height
代替overflow:hidden
(这是如何jQuery做它内部,我认为)。使用scrollHeight
来确定目标高度
不得不自己尝试,甚至不接近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();
})
你可以用它来隐藏你的元素:
document.getElementById("MyElement").style.display = "none";
要显示一个元素,你可以将显示设置为block:
document.getElementById("MyElement").style.display = "block";
只需使用普通的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轻松地滑动内容。
如果button with toggle class by click,该button将显示div通过增加其宽度…(toggle)
<script>
var $block = $( ".block" );
$block.hide();
$( "#toggle" ).on( "click", function() {
$block.stop().slideToggle(1000 );
$( ".block" ).animate({
width: "700px",
borderWidth: "10px"
}, 1500 );
});
<script>