jquery - 如何在单击按钮时显示被 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" 但是 slideDown 动画无法执行。

现在我可以在 div 之后说 $('hidden-div').hide() 并完全删除 css 但它会在我看到 div 然后它被隐藏的地方产生这个问题，它在页面加载开始时只有 0.5 秒，但看起来很糟糕。

所以有人知道解决方案吗？

---

找到了解决我自己问题的方法..

//重新隐藏 div，不知道为什么，但它有效。
$('.hidden-div').hide();


//更改类，使其不再显示:无
//但它不会显示 div，因为上面执行了 .hide()。
$('.hidden-div').attr('class','showing-div');


//向下滑动，一切正常。
$('.hidden-div').slideDown('快');



//这可以在 1 个类轮中完成。 (谢谢 Mohsen 的链接解释)
$('.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>