使用jquery切換器獲取可摺疊面板的問題

婁我附上鍊接，演示...

jQuery代碼 -

$(document).ready(function(){ 
    $('.collapsBTN').toggle(
     function() { 
       $(".rhs_container").css({'display':'none'}); 
       $('.rhs').animate({width: "20"}); 
      }, 
     function() { 
       $(".rhs_container").css({'display':'block'}); 
       $('.rhs').animate({width: "295"}); 
      } 
    ); 
});

問題 - 如果我們點擊塌陷按鈕（在粉紅色如上面給出的鏈接所示），切換功能正常工作，但按鈕在動畫寬度時消失。它應該與動畫一起使用。

任何人都可以解決這個問題嗎？

來源

2013-06-03 Pankaj

F.Y.I. jQuery的[toggle（）事件]（http://api.jquery.com/toggle-event/）函數已被[刪除]（https://github.com/jquery/jquery-migrate/blob/master/warnings。 md＃jqmigrate-jqueryfntogglehandler-handler-is-deprecated）作爲版本1.9的一部分。我正在使用1.8.2版本的 –

。或有沒有其他方法可以做同樣的事情？ – Pankaj

的問題是，雖然jQuery的動畫過寬度，它使overflow:hidden風格。這一個工程，雖然： jsfiddle

來源

2013-06-03 09:57:29 Aneri

謝謝隊友。有用 – Pankaj

如果您正在使用HTML 5和CSS3然後follwoings將是更好的辦法：

<script> 
    $('.collapsBTN').click(function() { 

     $('.rhs_container).toggleClass('change-size'); 
    }); 

</script> 

<style> 
    .rhs{ 
     -webkit-transition: width 1.5s linear ; 
     -moz-transition: width 1.5s linear ; 
     transition: width 1.5s linear ; 
    } 

    .change-size { 
     width: 20px; 

    } 

    .change-size .rhs_container{ 
     display:none; 
    }

否則請與jQuery檢查簡單的解決方案jsfiddle link

來源

2013-06-03 09:27:40 Surinderpal

使用jquery切換器獲取可摺疊面板的問題

回答

相關問題