JQuery Multi-Panel Toggle

Question

Я работаю над сайтом портфолио для разработчика iPhone.На этом сайте значки приложений iPhone будут действовать как кнопки переключения для панелей, описывающих приложение.Панели анимируются поверх содержимого главной страницы.Чтобы добавить к этому, если панель открыта и нажата иконка другого приложения, открытые панели нужно будет закрыть, и откроется следующее приложение.В настоящее время у меня отлично работает скрипт для переключения одной панели, смотрите здесь: http://cncpts.me/dev/

Так как же изменить текущий скрипт, чтобы он принимал несколько идентификаторов или классов, не создавая дублирующий код?* Вот 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

Вот мое решение:

// Plugtrade.com - jQuery Plugin :: Bounce //
// answer for /5627037/jquery-multi-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/

надеюсь, это поможет вам.

Answer 2

присваивает элементам списка атрибут 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

    });