Question

我遇到了jquery切换功能的问题。

Bellow我附上演示链接......

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

如果你使用的是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 jsfiddle link

检查简单解决方案

Answer 2

问题是，当jQuery在宽度上设置动画时，它会使overflow:hidden样式。但是这个有效： jsfiddle

使用jquery切换来解决可折叠面板的问题

2 个答案: