jQuery 多面板切换

Question

我正在为一位 iPhone 开发人员开发一个投资组合网站。在此站点中，iPhone 应用程序图标将充当描述应用程序的面板的切换按钮。面板在主页内容上进行动画处理。除此之外，如果面板打开并单击另一个应用程序图标，则打开的面板将需要关闭并且下一个应用程序将打开。目前我的脚本非常适合切换单个面板，请参见此处：http://cncpts.me/dev/

那么如何更改当前脚本，使其接受多个 id 或类，而不创建重复代码？

这是驱动单个切换操作功能的 jQuery。

    $(document).ready(function() {
    $("li.panel_button").click(function(){
        $("div#panel").animate({
            height: "700px"
        })
        .animate({
            height: "600px"
        }, "slower");
        $("div.panel_button").toggle('zoom'); return false

    }); 

   $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        }, "slower");   return false



   });  

});

这是 HTML：

<div id="panel"> 
            <div id="panel_contents"></div>
                <img src="images/iphone.png" border="0" alt="iPhone Development">
                <div class="panel_button" id="hide_button" style="display: none;">  
                <a href="#"><img src="images/collapse.png" alt="collapse" /></a>  
                </div>
        </div>

Answer 1

给列表项一个指向你试图显示/隐藏的 div 的 rel 属性。

<li rel='#panel_1' class='panel_button'> 

给所有的 div 一个通用的类，例如“flyaway”，在任何具有当前未隐藏的相同类的 div 上进行隐藏

$('.flyaway').not(':hidden').animate({ height: "0px"}, "slower");  

然后显示你想要的那个

$("li.panel_button").click(function(){
        $($(this).attr('rel')).animate({
            height: "700px"
        })
        .animate({
            height: "600px"
        }, "slower");
        $($(this).attr('rel')+" div.panel_button").toggle('zoom'); return false

    }); 

Answer 2

这是我的解决方案：

// Plugtrade.com - jQuery Plugin :: Bounce //
// answer for http://stackoverflow.com/questions/5234732/jquery-multiple-panel-toggle
jQuery.fn.bounce = function (el, bounceheight) {
        var thisdiv = this;
        var owidth = thisdiv.width();
        var oheight = thisdiv.height();

        var trigger = $(el); 

        // what we want is to make a parent div and then
        // get the child div's dimensions and copy it's position
        // display, width and height //

        // child then becomes an absolute element nested within the
        // parent div.
        thisdiv.wrap('<div class="bounceparent"></div>');

        // let's make a hidden button
        thisdiv.append('<input type=text class="bouncehide" style="display:none" />');

        var thishidebtn = thisdiv.last();

        var thisparent = thisdiv.parent();
        thisparent.width(owidth);
        thisparent.height(oheight+bounceheight);
        thisparent.css('border', '1px solid #ccc');
        thisparent.css('position', thisdiv.css('position'));
        thisparent.css('overflow', 'hidden');

        thisdiv.css('position', 'relative');
        thisdiv.css('top', oheight+bounceheight);
        thisdiv.css('height', '0');

        var toggle = false;

        thishidebtn.click(function() {
            if(toggle)
            {
                toggle = false;
                thisdiv.animate({ top: 0, height:oheight+bounceheight }).animate({ top: oheight+bounceheight, height:0 });
            }
        });


        trigger.click(function() {
            // some code //
            if(!toggle)
            {
                // show
                $('.bouncehide').click();
                toggle = true;
                thisdiv.animate({ top: 0, height:oheight+bounceheight }).animate({ top: bounceheight, height:oheight });
            }
            else
            {
                // hide
                toggle = false;
                thisdiv.animate({ top: 0, height:oheight+bounceheight }).animate({ top: oheight+bounceheight, height:0 });
            }

        });


        // return original object so it can be chained
        return thisdiv;
    }; // END -> plugin :: bounce

...这是你如何使用它的：

$(function(){
   $('#boinky').bounce('#toggle', 50);
   $('#boinkyb').bounce('#toggleb', 50);
});

jsFiddle 示例：

http://jsfiddle.net/523NH/14/

希望这对你有帮助。