javascript - 如何在加载时隐藏元素？

Question

我的代码使用 jQuery 启用 Accordion 。
当我单击 Accordion dt 元素时， Accordion 会打开，如果再次单击它，它会关闭。

默认情况下，它是打开的，但在整个页面加载后会关闭。
这看起来真的很奇怪，所以我想将它隐藏为默认值。
可能吗？

Javascript

jQuery(document).ready( function() {
    $(".accordion dt").click(function(){
        $(this).next("dd").slideToggle();
        $(this).next("dd").siblings("dd").slideUp();
        $(this).toggleClass("open");   
        $(this).siblings("dt").removeClass("open");
    });
});

window.onload = function(){     
        $(".accordion dd").hide();
}

HTML

<div class="accordion">
    <dt><h3>Menu</h3></dt>
    <dd>
    Menu Contents
    </dd>
</div>

Answer 1

为什么不将 hide() 函数放在首页加载处理程序中？

jQuery(document).ready( function() {
    $(".accordion dd").hide();

    $(".accordion dt").click(function(){
        $(this).next("dd").slideToggle();
        $(this).next("dd").siblings("dd").slideUp();
        $(this).toggleClass("open");   
        $(this).siblings("dt").removeClass("open");
    });
});

无论如何，我建议您将其作为 CSS 规则:

.accordion dd { display: none; }