2013-11-28 115 views
0

注:我已经在网上搜索并尝试实施几个不同的代码,并没有任何工作。下面的代码是当前在测试页面上的代码。似乎无法得到滑动工作


我有下面的代码。我曾经有过这样的工作,但是不小心删除了我的代码,现在我无法获得任何工作。

我在页面顶部有一个隐藏的div。我需要有一个链接,我可以放置在任何可以切换该div显示的位置。我想要一个漂亮的动画,这就是为什么我使用滑动窗口。我有一段时间用不同的代码滑动工作了一段时间,但是我丢失了代码,现在没有任何工作。

<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> 

回答

2

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

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

谢谢。我有一种感觉,它会变得很简单,因为我做错了。这似乎奏效了。我会尽快接受你的回答。 – kdjernigan

2

你忘了等待整个页面加载在运行你的jQuery脚本之前。该页面看不到与已加载的类相匹配的任何元素。

http://jsfiddle.net/T4SCW/

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