jQuery手风琴的简单制作

首先我们先来做一个简单的jQuery的效果图，具体内容如下

css代码 如下：

  *{margin: 0;padding: 0;}
  ul,li{list-style:none}
   ul {
    width: 300px;
    background: yellow;
    margin: 50px auto;
  }
  ul>li{
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  ul>li>ol{
    background: blue;
    display: none;
  }
  ul>li>ol>li{
    line-height: 50px;
  }

HTML代码 如下：

  

    
jquery的核心函数
    

      
jQuery([selector,[context]])
      
jQuery(html,[ownerDoc])1.8
      
jQuery(callback) 
      
jQuery.holdReady(hold)1.6+
    
  
  

      
jQuery的效果
    

      
hide 显示和隐藏
      
slideDown 只对高度有效
      
fadeIn 淡入效果
      
slideToggle 淡入和淡出效果
    
  
  

      
jQuery的属性
    

      
attr 设置或返回的元素
      
removeAttr 从每个元素中删除一个元素
      
prop 获取第一个元素的属性
      
removeProp prop()方法设置属性集
    
  
  

      
jQuery的事件
    

      
off 在元素上移除多个事件的处理函数
      
bind 为每个元素绑定事件处理函数
      
one 为每个匹配元素绑定一次性处理函数
      
trigger 在每个匹配的元素上触发某类事件
    
  

jQuery代码 如下：

效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。