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/

希望这会对你有所帮助。

jQuery多面板切换

2 个答案: