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动画。

现在我可以在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');

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

尝试使用＆lt;和＆gt;而不是[和]，并正确格式化一切？

Answer 3

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

Answer 4

通过jQuery绑定事件，不要使用内联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。

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

4 个答案: