使用jquery切换获取可折叠面板的问题

Question

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

问题-如果我们点击排序规则按钮(粉红色如上面所示的链接)，切换功能工作良好，但按钮会消失时，动画宽度。它应该是可访问的动画。

有人能解决这个问题吗？

Answer 1

问题是，当jQuery动画超过宽度时，它就会产生overflow:hidden风格。不过，这个方法是可行的：小提琴

Answer 2

如果您使用的是html 5和css3，那么折叠将是更好的方法：

<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 琴键检查简单解决方案。