遇到的问题

1.折叠菜单如何实现，一开始没有思路，后来网上查找了一下，大概的思路如下：

<h4 class="unfold">我爱</h4>
<ul class="toggle">
   <li>哈士奇</li>
   <li>大金毛</li>
   <li>萨摩耶</li>
</ul>
<h4>其他内容</h4>

首先将ul设置为overflow：hidden，height:0。然后点击h4的时候改变ul的高度就可以了。不使用display：none，是因为使用display属性动画效果不好实现。

然后又去网上找了一个插件，看一下别人的写法，发现jquery中有一个slide-toggle方法，可以实现隐藏和展开的动画效果，但是这个插件的js代码看的不是很懂：

//html结构
<ul id="accordion" class="accordion">
   <li>
      <div class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></div>
      <ul class="submenu">
         <li><a href="#">Photoshop</a></li>
         <li><a href="#">HTML</a></li>
         <li><a href="#">CSS</a></li>
         <li><a href="#">Maquetacion web</a></li>
      </ul>
   </li>
</ul>

1. ‍‍js代码如下：‍‍
   

2. $(function() {
      var Accordion = function(el, multiple) {
         this.el = el || {};
         this.multiple = multiple || false;
   
         // Variables privadas
         var links = this.el.find('.link');
         // Evento
         links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
      };
   
      Accordion.prototype.dropdown = function(e) {
         console.log(e);
         var $el = e.data.el;
            $this = $(this),
            $next = $this.next();
   
         $next.slideToggle();
         $this.parent().toggleClass('open');
   
         if (!e.data.multiple) {
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
         };
      }  
   
      var accordion = new Accordion($('#accordion'), false);
   });

   看了半天只看出一点头绪来，感觉这种写法很厉害的样子。on方法中的第二个参数，也就是那个对象，可以传给后面的那个回调函数，然后这个事件处理函数中有一个默认的事件对象，可以通过这个事件对象的e.data来访问这个数据。前面的都有点头绪能看懂了，但是那个dropdown方法还没有看懂，明天有时间再研究。

3. 
   

4. 
   

5. 收获
   

6. 1 理解了单页面的真正含义。

7. 2.学习了折叠菜单的基本实现思路。