开发者

Sliding & hiding multiple panels in jQuery

I have a table with multiple rows in each row is a select list and based on the selection (when the onchange event is fired) panels appear containing additional data below the row.I currently have code like this:

 var allPnls = '.inv-dtl-comnts-add,.inv-dtl-comnts-update';
    $(document).ready(function(){
    hideAll();

    //select action change
    $(".inv-dtl-ddlaction").change(onSelectChange);

    $(".btn-cancel").click(function(event){
        slideAll();
        $(".inv-dtl-ddlaction").val('[Select an Action]');
        return false;
    });

});

    function onSelectChange(event){

    //find out which select item was clicked
    switch($(this).val())
    {
        case 'View/Add Comment':
            $(this).closest(".row").children(allPnls).slideUp("fast",
                function(){
                    $(this).closest(".row").children(".inv-dtl-comnts-add").slideToggle("fast");
            });
            break;
        case 'Change Status':
            $(this).closest(".row").children(allPnls).slideUp("fast",
                function(){
                    $(this).closest(".row").children(".inv-dtl-comnts-update").slideToggle("fast");
            });
            break;
        default:
            //code to be executed if n is different from case 1 and 2
    }

 }

 function hideAll(){
    $(allPnls).hide();
 }
 function slideAll(){
    $(allPnls).slideUp("fast");
 }

So I'm hiding all the panels when the page loads and if a panel is already open I want to slide it shut before reopening the new panel. This works with the postback. With just one panel in the selection it worked great but with two panels the sliding up happens twice (it seems to slide down unopened panels before sliding them back up again). How can I adjust this so that I can get all panels listed in the variable allPnls to slide shut ONLY if they are alre开发者_高级运维ady open? Is there a better way of sliding the panels shut and then having a callback to have the slideToggle work?

Lloyd


You can shut only visible or open panels by adding the :visible in the selector as below:

var allPnls = '.inv-dtl-comnts-add:visible,.inv-dtl-comnts-update:visible';

I'm not sure if this would fix your problem though. Maybe if you provide a sample page representing this problem, I could help.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜