jquery 切换选项卡 - 需要折叠已设置 overflow:hidden 的外部容器

Question

如果有人能帮助我（jquery 的新手）解决这个希望很容易解决的问题，我将永远感激不已。

请看这个测试：

http://the3rdobject.com/test3/index.html

一切正常，除了一件事 - 我试图在单击关闭选项卡时折叠外部红色框，面板完美关闭但不幸的是外部容器保持打开状态。我试图让它工作的原因是这个选项卡出现在旋转木马滑块的顶部，当面板保持打开时，它会阻止在部分基础图像上滑动功能。

我的jquery只是添加和删除一个class来控制高度。它成功地添加了 class 但不会删除它。我敢肯定这很简单，但我的 jquery 充其量是不稳定的。

<script>
    $(function(){
        $(".collectionbutton").click(function(){
            if($(".collectionbutton a").hasClass('openpanel')){
                $(".text").animate({top:'-' + $(".text-content-container").css('height') + 'px'}, 500);
                $(".collectionbutton a").toggle();
                $(".text-wrap").addClass('heightchange');
            } else {
                $(".text").animate({top:$(".text-content-container").css('') + 'px'}, 500);
                $(".collectionbutton a").addClass('openpanel');
            }   
        });
    });
    </script>

我试过添加：

$(".text-wrap").removeClass('heightchange');

在 else 语句的所有位置中，但它不会删除 class。我做错了什么？

Answer 1

你能试试这样的东西，看看它是否有效...

$(function(){
        $(".collectionbutton a").click(function(){
            if($(this).hasClass('openpanel')){
                $(".text").animate({top:'-' + $(".text-content-    container").css('height') + 'px'}, 500);
                $(".collectionbutton a").toggle();
                $(".text-wrap").removeClass('heightchange',{duration:500});

            } else {
                $(".text").animate({top:$(".text-content-container").css('') + 'px'}, 500);
                $(".text-wrap").addClass('heightchange',{duration:500});
                $(".collectionbutton a").toggle();

            }   
        });
    });

// 试试这个新代码....现在应该可以正常工作了..

$(function(){
        $(".collectionbutton a").click(function(){
            if($(this).hasClass('openpanel')){
                $(".text").animate({top:'-' + $(".text-content-container").css('height') + 'px'}, 500);
                $(".collectionbutton a").toggle();
                setTimeout(function() {
                    $(".text-wrap").removeClass('heightchange');
                }, 500);

            } else {
                $(".text").animate({top:$(".text-content-container").css('') + 'px'}, 500);
                $(".text-wrap").addClass('heightchange');
                $(".collectionbutton a").toggle();

            }   
        });
    });

jquery 切换选项卡 - 需要折叠已设置 overflow:hidden 的外部容器

jquery toggle tab - need to collapse outer container that has overflow:hidden set

jquery

toggle