jquery切換選項卡 - 需要摺疊溢出的外部容器：隱藏集

Question

我會永遠感激，如果有人可以幫助我（jQuery的newb）與這個希望容易解決的問題。

請參閱本測試：

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

一切從關運作良好，除了一兩件事 - 我試圖摺疊外紅框內點擊了關閉選項卡時，面板關閉完美但不幸的是外部容器保持打開狀態。我試圖讓這個工作的原因是這個選項卡出現在旋轉木馬滑塊的頂部，而面板保持打開狀態時，它會阻止部分底層圖像的滑動功能。

我的jquery只是添加和刪除一個類來控制高度。它可以成功地添加類，但不會刪除它。我相信這很簡單，但我的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語句的所有位置內，但它只是不會刪除類。我究竟做錯了什麼？

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(); 

      } 
     }); 
    });