0

我正在使用顶部面板下拉菜单。类似于此http://www.yootheme.com/tools/extensions/yootoppanel

最初它在 mootools 中。但我在 IE8 中遇到了问题。所以我想把它改成Jquery。我已经制作了向下滑动和向上滑动的功能。但我无法添加滑动效果。就编码而言，我在按钮的单击事件上调用了一个函数。向下滑动时增加高度，位置等，向上滑动时将其移除。

function toggle(articleheight,height) {
        if(height < 0){
        slideIn(articleheight);
        }
    else{
        slideOut(articleheight);
        }
     }
function slideIn(articleheight){
    jQuery(".panel").css("margin-top",0);
    jQuery(".panel-wrapper").css("height",articleheight);

}
function slideOut(articleheight){
    jQuery(".panel").css("margin-top",-articleheight);
    jQuery(".panel-wrapper").css("height",0);

}

我的 HTML 代码

<div id="toppanel" class="toppanel">

        <div class="panel-container">
            <div class="panel-wrapper">
                <div class="panel">
                    <div class="content">
                        MY CONTENT
                    </div>
                </div>
            </div>

            <div class="trigger" style="<?php echo $css_left_position ?>">
                <div class="trigger-l"></div>
                <div class="trigger-m">Panel</div>
                <div class="trigger-r"></div>
            </div>
        </div>

    </div>

请帮忙

4

2 回答 2

1

我会考虑使用 jQuery 滑动效果

示例包含在 api 参考中

http://api.jquery.com/category/effects/sliding/

我添加了一个简单的示例，您可以轻松地使高度可变：

http://jsfiddle.net/dmpWa/19/

于 2011-10-24T05:53:30.690 回答
0

如建议的那样，幻灯片效果。jsFiddle 如果您是从 mootools 到 jquery，您可能不想再为几十个函数而烦恼。简单的声明式 jquery 将杀死像这样简单的事情。

<div class="topPanel"></div>
<div class="topTab"><a href="#">Top Panel</a></div>

...

$('.topTab a').toggle(function(){
    $(this).parent().prevUntil('.topTab').slideDown();
},function(){
    $(this).parent().prevUntil('.topTab').slideUp();
});
于 2011-10-24T06:09:07.353 回答