collapse 可折叠面板的状态改变事件及布局

                
                    顯示篩選:
                    

                            
                       
                   
               

在setName里面可以写面板状态变化触发的事件:

 setName:function () { 
          if(this.isZ){
            $(".sx").text("關閉篩選");
             this.isZ=false;
             $(".tag").hide();
          }else{
            $(".sx").text("顯示篩選");
            if(this.flag==1){
              $(".tag").show();
            }else{
              $(".tag").hide();
            }
            this.isZ=true;
          }
         },

布局:

(注意:collapse 里面的内容会受到collapse的设置的宽度所限制,比如我在里面放置了一些内容老是不能显示在同一行,因为不是同一时间写的,所以就忽略了这一点,后来就改了过来)

html:

 
        
            顯示篩選:
            

                    //此處填折疊面板裏面的內容布局代碼
               
           
       

css:

.collapse{
  float: left;
  border-width: 0px;
  width: 300px;
  margin-left: 200px;
}
.sx {
  font-size: 14px;
}
.ivu-collapse>.ivu-collapse-item>.ivu-collapse-header{
  background: #fff;
}
.ivu-collapse-content>.ivu-collapse-content-box{
  margin-left: 50px;
} 

樣式: