[英]how to do show/hide div with slide in Javascript (without jQuery)
how to do show/hide div with slide from left to right in Javascript (without jQuery) 怎么做在Javascript中从左到右显示/隐藏div (没有jQuery)
this is example for what i need (in jQuery): http://jsfiddle.net/dRpWv/1/ 这是我需要的例子(在jQuery中): http : //jsfiddle.net/dRpWv/1/
this is the example source of what i need in jQuery: 这是我在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/ http://jsfiddle.net/dRpWv/665/
Here ya go. 你去吧。 Makes use of CSS3
transition
to smoothly animate the slide (much more smoothly than jQuery could ever manage, I might add). 利用CSS3
transition
来平滑地为幻灯片制作动画(比jQuery可以管理得更顺畅,我可能会补充)。
Since display
is not transitionable, it uses height
instead with overflow:hidden
(which is how jQuery does it internally, I think). 由于
display
不可转换,它使用height
而不是overflow:hidden
(我认为这是jQuery在内部执行的方式)。 Uses scrollHeight
to determine target height. 使用
scrollHeight
确定目标高度。
had to try it myself, not even close to Jquery but working :) http://jsfiddle.net/6MTma/ 不得不自己尝试,甚至不接近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();
})
if button with toggle class by click that button will shows the div by incresing its width...(toggle)
如果按钮具有切换类,则单击该按钮将通过增加其宽度来显示div ...(切换)
<script>
var $block = $( ".block" );
$block.hide();
$( "#toggle" ).on( "click", function() {
$block.stop().slideToggle(1000 );
$( ".block" ).animate({
width: "700px",
borderWidth: "10px"
}, 1500 );
});
<script>
You can use this to hide your element: 您可以使用它来隐藏您的元素:
document.getElementById("MyElement").style.display = "none";
To show an element you can set the display to block: 要显示元素,您可以将显示设置为阻止:
document.getElementById("MyElement").style.display = "block";
Just use a normal onclick handler and store a variable with the current state (displayed/hidden): 只需使用普通的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
};
You'll find out how to slide stuff easily by using Google. 您将了解如何使用Google轻松滑动内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.