javascript - 使用 jquery 切换的可折叠面板出现问题

Question

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

贝娄我附上了演示链接...

jsfiddle链接

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 链接检查简单的解决方案

Answer 2

问题是，虽然 jQuery 会在宽度上设置动画，但它会产生overflow:hidden样式。不过，这个可行： jsfiddle