javascript - 似乎无法让 slidetoggle 工作

Question

注意:我已经在线搜索并尝试实现几种不同的代码，但似乎没有任何效果。下面的代码是目前在测试页面上的代码。

---

我有以下代码。前一段时间我曾以某种方式工作过，但不小心删除了我的代码，现在我什么都做不了了。

我在页面顶部有一个隐藏的 div。我需要有一个链接，我可以将其放置在任何地方以切换该 div 以显示。我想要一个漂亮的动画，这就是我使用 slidetoggle 的原因。一段时间前，我曾使用不同的代码使用 slidetoggle，但我丢失了代码，现在我所做的一切都不起作用。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('.Hdiv_Top').click(function(){
    $("#HiddenDiv_Top").slideToggle();
    return false;
});
</script>

<style>
#HiddenDiv_Top {
    display:none;
}
#HiddenDiv_Top:target {
    display:block;
}
</style>
<div id="HiddenDiv_Top" style="height: 150px; background: #FF9; color: #000; border-bottom: 2px solid #000; width: 100%;"> bla bla bla </div>

<ul>
<li ><a href="javascript:void(0)" class="Hdiv_Top" >Directions</a></li>
</ul>

Answer 1

您的代码需要在 document ready handler 中因为当你的脚本被执行时 Hdiv_Top 元素还没有加载到 dom

jQuery(function($){
    $('.Hdiv_Top').click(function(){
        $("#HiddenDiv_Top").stop(true, true).slideToggle();
        return false;
    });
})