如何在按钮单击时显示由 css 隐藏的 div

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" 但无法执行幻灯片动画。

现在我可以在 div 之后说 $('hidden-div').hide() 并完全删除 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 并用 id 指向该 div

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

要同时具​​有向下滑动和淡入淡出效果，并使用非内联代码绑定事件，您可以使用以下代码：

$('button').bind('click', function(){
$('.hidden-div').slideDown(500).fadeOut(1000); //500ms slide down and 1s fade out
})

也从 hidden-div 类中删除 disply:none 。