jquery slideToggle 更像是盲人

Question

我正在尝试使用 slideToggle 让我的滑动 div 正常工作。首先，这是工作网址：* Link Removed

我遇到的问题是我得到了更多的盲目效果，而不是滑下效果。我尝试更改 CSS 并使用负上边距等无济于事。我想要完成的基本上与 telerik-dot-com 上的 Products 菜单和站点内的 All Products 菜单相同。 aspnet-ajax/controls/examples/default/ 中的那个与我试图通过点击功能做的事情更相关。我意识到这些可能有所不同，但我基本上在功能方面寻找的是 div 做更多的滑动而不是盲目向下。

感谢您的帮助。

此外，为了补充这一点，我想在面板滑入后淡入面板的实际内容，然后在单击选项卡以在向上滑动之前关闭面板时淡出。我尝试将fadeIn 函数添加到h2 和p 但没有运气。如果有人想对此发表意见，请随意。谢谢！

Answer 1

您的 css 应该如下所示，top 属性可以在页面加载时计算，也可以给定一个固定值。

#slidebox {
    margin:0;
    padding:0;
    position:absolute;
    right:40px;
    top:-141px; /*this is the trick*/
    width:auto;
    z-index:100;
}

然后在您的 js 上，您需要做的就是按照 subtenante 所说的使用“top”属性。

var $a = $('a.btn-slide'),
    $slider = $('#slidebox');

$a.click(function(){
   if($a.hasClass('active')){
     $slider.animate({'top':0},400,function(){
        $a.removeClass('active');
     });
   }else{ 
     $slider.animate({'top':'-141px'},400,function(){
        $a.addClass('active');
     });
   }
})

希望这会有所帮助，思南。