Question

注意：我在线搜索并尝试实现几个不同的代码，似乎没有任何工作。下面的代码是当前在测试页面上的代码。

我有以下代码。我有一段时间或之前的工作，但不小心删除了我的代码，现在我无法得到任何工作。

我在页面顶部有一个隐藏的div。我需要一个链接，我可以放在任何可以切换显示div的地方。我想要一个很好的动画，这就是我使用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;
    });
})

Answer 2

在运行jQuery脚本之前，您已经忘记等待整个页面加载。该页面没有看到任何与已加载的类匹配的元素。

http://jsfiddle.net/T4SCW/

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

似乎无法使用slidetoggle工作

2 个答案: