在 jQuery 中滑动和隐藏多个面板答案

【问题标题】：Sliding & hiding multiple panels in jQuery在 jQuery 中滑动和隐藏多个面板
【发布时间】：2010-05-13 21:00:10
【问题描述】：

我有一个表，每行中有多行是一个选择列表，并且基于选择（触发 onchange 事件时）面板出现，其中包含行下方的其他数据。我目前有这样的代码：

 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");
 }

所以我在页面加载时隐藏了所有面板，如果面板已经打开，我想在重新打开新面板之前将其滑动关闭。这适用于回发。选择中只有一个面板效果很好，但有两个面板向上滑动发生了两次（它似乎先向下滑动未打开的面板，然后再次将它们向上滑动）。我该如何调整它，以便我可以让变量 allPnls 中列出的所有面板仅在它们已经打开时才滑动关闭？有没有更好的方法来关闭面板，然后通过回调让 slideToggle 工作？

劳埃德

【问题讨论】：

标签： jquery select drop-down-menu html-select

【解决方案1】：

您可以通过在选择器中添加 :visible 来仅关闭可见或打开的面板，如下所示：

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

我不确定这是否能解决您的问题。也许如果你提供一个代表这个问题的示例页面，我可以提供帮助。

【讨论】：