Question

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

我遇到的问题是我得到了更多的盲目效果而不是降低效果。我试过改变CSS并使用负上边距等无济于事。我想要完成的工作与 telerik-dot-com 上的产品菜单和网站内的所有产品菜单基本相同。 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');
     });
   }
})

希望这有帮助，思南。

jquery slideToggle表现得更像盲人

1 个答案: