如何显示div隐藏在CSS按钮点击
我是jquery的新手,我想隐藏div css: display:none
,一旦点击了按钮,$(..).slideDown
将执行,div将显示其内容。我试过这个。如何显示div隐藏在CSS按钮点击
<style> .hidden-div{ display:none } </style>
<div class="hidden-div"> You can't see me </div>
<button onclick="show-div()"> Show Above Div </button>
<script>
function show-div(){
$('.hidden-div').slideDown('fast');
// more stuff...
}
</script>
这不真的把它向下滑动,因为它与其他所有东西重叠?另外我试着将class="hidden-div"
设置为class="display-div"
,但不能执行slideDown动画。
现在我可以说$('hidden-div').hide()
只是在div后面,并完全删除css,但它创造了这个问题,我看到的div,然后它隐藏起来,它只有0.5秒的事情在页面加载开始,但它看起来不好。
因此,任何人都知道一个解决方案?
发现我自己的问题的解决方案..
//rehide the div, not sure why, but it works.
$('.hidden-div').hide();
//change class so it no longer display:none
//but it will not show the div as .hide() was execute above.
$('.hidden-div').attr('class','showing-div');
//Slide it down and everything works.
$('.hidden-div').slideDown('fast');
//this can be done in 1 liner. (thank you, Mohsen for chaining explanation)
$('.hidden-div').hide().attr('class','showing-div').slideDown('fast');
希望这是对别人有帮助的。
,最好使用标准的JavaScript,并指向该div id为
通过jQuery<style> .hidden-div{ display:none } </style>
<div class="hidden-div" id="hidden-div"> You can't see me </div>
<button onclick="getElementById('hidden-div').style.display = 'block'"> Show Above Div </button>
那就好,但我想动画的JQuery.slideDown(); – Kivylius
在你的javascript中,首先使用jQuery函数removeClass()去除类'hidden-div'。 看看是否有帮助?
如果我删除类div div将显示,但.slideDown()的动画丢失,因为该div是公开的。 – Kivylius
- 绑定事件,不使用内嵌的JavaScript方法
-
jQuery
SlideDown
方法不适用于删除元素。你可以使用hide
或fadeOut
- 顺便说一句,如果你想有一个向下滑动的效果,然后隐藏你可以链接两个方法的元素。
- 为了防止重叠,你需要使用CSS。您可以使用
position:absolute
或给元素的父级提供某个height
。
兼得滑下和淡化效果,并结合使用非内嵌代码,你可以使用此代码的事件:
$('button').bind('click', function(){
$('.hidden-div').slideDown(500).fadeOut(1000); //500ms slide down and 1s fade out
})
太删除disply:none
从hidden-div
类。
show-div不是唯一的函数,我也有load-div和hide-div函数,所以我不能使用绑定事件,因为它不会工作。另外关于链接效果try'd'$('。hidden-div')。attr('class','show-div')。slideDown('fast');'但动画仍然丢失。 – Kivylius
Markdown是*不是* BBcode。 – alex
*有一个功能来回答你自己的问题。 –