如何显示div隐藏在CSS按钮点击

Question

我是jquery的新手，我想隐藏div css: display:none，一旦点击了按钮，$(..).slideDown将执行，div将显示其内容。我试过这个。

<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'); 

希望这是对别人有帮助的。

Answer 1

，最好使用标准的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> 

Answer 2

$('.hidden-div').show('fast'); 

尝试使用<和>而不是[和]，并正确格式化所有内容？

Answer 3

在你的javascript中，首先使用jQuery函数removeClass（）去除类'hidden-div'。 看看是否有帮助？

Answer 4

1. 绑定事件，不使用内嵌的JavaScript方法
2. jQuery SlideDown方法不适用于删除元素。你可以使用hide或fadeOut
3. 顺便说一句，如果你想有一个向下滑动的效果，然后隐藏你可以链接两个方法的元素。
4. 为了防止重叠，你需要使用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类。