jquery实现半透明窗口带折叠效果

js代码

//展开或折叠应急物资数量详情         
            $hideable = $('#hideable');
            $('a#hiding').click(function(event) {
              event.preventDefault();              
              if ($hideable.is(':hidden')) {
                $hideable.slideDown('slow').show();
                $(this).text('▽').css('font-size','20px');
              } else {
                $hideable.slideUp('slow');
                $hideable.hide('slow');
                $(this).text('▷').css('font-size','10px');
              }
            });

css代码及html代码

参考上一个文章 :css实现背景透明文字不透明

窗口标签栏

  • 我是line1
  • 我是line2
  • 我是line3

.accordion-header {background-color:rgba(48,126,204,0.7);border-color: #307ecc; min-height: 30px;padding:2px 8px;}
#hideable {background-color:rgba(48,126,204,0.4);border-color: #307ecc;padding-left:10px;}
#hiding {color:white;font-size:20px;padding-right:10px;}
.mapheader4 {color:white;margin:5px;}  
.hideline li{color: #FFFFFF; font-size:14px;}

你可能感兴趣的:(jquery实现半透明窗口带折叠效果)