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

给列表项一个rel属性，该属性指向您要显示/隐藏的div。

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

希望对您有帮助。