展开折叠控件实现

     近来一直在瞎折腾，想找一个靠谱点儿的公司（问我什么公司靠谱，其实俺也不知道），起码能按时发工资吧！不论结果如何，总归能了解一些东西，也让自己更清楚自己

的专业水平，以及需要努力的方向......废话就不多说了，看看今天的好东西吧！！！............................................................以下是正文..........................................................................

一、先看效果

   

看到这个图，我想明白要实现的效果了

二、代码

css

 <style type="text/css">
    body {
      font-family: "Microsoft YaHei",arial,courier new,courier,"宋体",monospace;
       font-size:16px;
     color: #333;
    }
    *{
      margin: 0;
      padding:0;
      list-style-type:none;
      border:none;
     }
  a{ text-decoration: none; color: #337ab7;}
  p{ padding: 10px 0;line-height: 1.5;}
  #accordion_wrap{
    width: 300px;
    border-radius: 4px;
    border:1px solid #ccc;
    margin-left: 10px;
    margin-top: 10px;
  }
  dl{margin-bottom: 0px;}
  .accordion dd{
    display: none;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
  }
  .accordion dt{
    line-height: 44px;
    border-bottom: 1px dashed #ccc;
  }
  .accordion dt a{
    padding-left: 20px;
    background: url(image/accordion_nomarl.jpg) 5px 5px no-repeat;
  }
  .accordion dt .active{
    background: url(image/accordion_active.jpg) 5px 8px no-repeat;
  }
 .last_style dt{ border-bottom: none;}
 .last_style dd{ border-bottom: none;}
 .last_active dt{ border-bottom: 1px dashed #ccc;}
 .last_active dd{ border-bottom: none;}
 </style>

html

 <div id="accordion_wrap">
      <dl class="accordion">
         <dt><a href="#"><span>title goes here</span></a></dt>
         <dd><p>一个周日的下午，当我阅读有关哥伦比亚号航天飞机事故中丧生的宇航员的传记时，我的脑海中又浮现出那个船工在演奏手风琴的情景。</p></dd>
       </dl>
       
        <dl class="accordion">
         <dt><a href="#"><span>title goes here</span></a></dt>
         <dd><p>一个周日的下午，当我阅读有关哥伦比亚号航天飞机事故中丧生的宇航员的传记时，我的脑海中又浮现出那个船工在演奏手风琴的情景。</p></dd>
       </dl>
       
        <dl class="accordion">
         <dt><a href="#"><span>title goes here</span></a></dt>
         <dd><p>一个周日的下午，当我阅读有关哥伦比亚号航天飞机事故中丧生的宇航员的传记时，我的脑海中又浮现出那个船工在演奏手风琴的情景。</p></dd>
       </dl>
       
        <dl class="accordion last_style">
         <dt><a href="#"><span>title goes here</span></a></dt>
         <dd><p>一个周日的下午，当我阅读有关哥伦比亚号航天飞机事故中丧生的宇航员的传记时，我的脑海中又浮现出那个船工在演奏手风琴的情景。</p></dd>
       </dl>
    </div>

jQuery

<script type="text/javascript">
      function init_accordtion(){
         
         //元素是否存在，若不存在则退出
         if (!$('.accordion').length) { return;}
         
         //收集所有折叠项
        $('dl.accordion').eq(0).find('dt a').addClass('active').end().find('dd').show();

         //单击事件监听器
         $('dl.accordion dt a').on('click', function(){
            //
            var $dt = $(this).parent();  // 双亲dt节点
            var $dd =$(this).parent().next(); //对应的dd内容
            var $sibling_dl = $dt.parent().siblings();//祖先dl元素的同胞元素  
            
            //这个函数的作用是为最后一个dl控制样式的
            function findLast(){
                if ($('#accordion_wrap').find('dl:last').find('dd').is(':hidden')) {
                    $('#accordion_wrap').find('dl:last').removeClass('last_active').addClass('last_style');
                }else{
                  $('#accordion_wrap').find('dl:last').removeClass('last_style').addClass('last_active');
                }
              }
            // 点击事件的核心代码
            if ($dd.is(':hidden')) {
                $(this).addClass('active');
                $dd.slideDown('fast').parent().siblings().find('dt a').removeClass('active').end().find('dd:visible').slideUp('fast',findLast);
            };
            
            this.blur();
            return false;
 
         });
      }//


      init_accordtion();
  </script>

小结：简单说说我对jQuery库编写效果的体会，看似编写的很复杂。其实jQuery对DOM元素的操作分为两步，一步是核心代码，实现可操作效果的；一步是样式的切换，也就是默认一种样式，触发时一种样式。在编写jQuery时可以先

脱离样式，实现核心代码，然后再添加样式，这样就思路清晰明了。

 

转载于:https://www.cnblogs.com/wjh0916/p/4988355.html