zoukankan      html  css  js  c++  java
  • Jquery Toggle with Images

          
           <style>
           .trigger{
               height:25px; 100%;
               padding-top:7px; color:#3842b4; font-weight:bold; padding-left:5px;
           
               background:url(down.png) no-repeat center right
          
           }
          
          
          .active{
               height:25px; 100%;
          
               background:url(up.png) no-repeat center right
          
           }
          
           .toggle_container{}
          
           .icon_col{ background:url("collapse.jpg"); 13px; height:13px}
           .icon_exp{ background:url("expand.jpg"); 13px; height:13px}
          
           </style>  
                  
                  
      <script type="text/javascript">
          $(document).ready(function() {

              $(".toggle_container").hide();

              $(".trigger").toggle(function() {
                  $(this).addClass("active");
              }, function() {
                  $(this).removeClass("active");
              });

              $(".trigger").click(function() {
              $(this).next(".toggle_container").slideToggle("slow,");

                 
              });

          });
    </script>
           
                  


    <div style=" background-color:#d7e5f7; padding-right:10px;">
     
      <div  class="trigger">title
     </div>

      <div class="toggle_container"  > 

    content  </div> 

    <div  class="trigger">title2
     </div>

      <div class="toggle_container"  > 

    content2  </div> 

    <div  class="trigger">title3
     </div>

      <div class="toggle_container"  > content3

      </div> 

    </div>

  • 相关阅读:
    c# WF 第11节 RichTextBox
    c# WF 第10节 textbox 控件
    c# WF 第9节 button控件
    c# WF 第8节 label控件
    c# WF 第7节 对控件的基本操作
    c# WF 第6节 MDI窗体
    c# WF 第5节 窗体的控件
    Python接口自动化之动态数据处理
    Saturn分布式调度之系统架构简介
    Jmeter系列之接口依赖
  • 原文地址:https://www.cnblogs.com/mqingqing123/p/1925572.html
Copyright © 2011-2022 走看看