似乎无法滑动工作

Question

Note: I have searched online and tried implementing several different codes and nothing appears to work. The code below is the code that is currently on the test page.

---

I've got the following code. I had this working someway or another a while back but accidentally deleted my code and now I can't get anything to work.

I have a hidden div at the top of the page. I need to have a link that I can place anywhere that will toggle that div to display. I would like a nice animation which is why I used slidetoggle. I had slidetoggle working a while back with different code, but I lost the code and now nothing I do is working.

<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

Your code needs to be in a document ready handler because when your scripts is executed the Hdiv_Top element is not yet loaded to the dom

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

Answer 2

You've forgotten to wait for the entire page to load before running your jQuery script. The page doesn't see any element matching that class that has loaded.

http://jsfiddle.net/T4SCW/

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