获得问题与可折叠面板使用jquery切换

getting issue with collapsible panel using jquery toggle

本文关键字：jquery 切换 问题 可折叠      更新时间：2023-09-26

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

-如果我们点击折叠按钮(如上所示的粉色)，切换功能可以正常工作，但按钮在动画宽度时消失了。它应该是可视的动画

有人能解决这个问题吗?

问题是，虽然jQuery动画宽度，它使overflow:hidden风格。不过，这个方法管用:jsfiddle

如果你正在使用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链接

相关文章：