Fe-12 dom&轮播图

Fe-12-1

Fe-12-2 toggle

Toggle

• 效果:

  
  
  

  toggle.gif
• toggle.html

  
  
  
  
  


  
  

      

          点击展开详情
          

              详情
          
      
      

          点击展开详情
          

              详情
          
      
  
  

• toggle.js

var log = function() {
    console.log.apply(console, arguments)
}


var e = function(selector) {
    return document.querySelector(selector)
}


var bindEvent = function(element, eventName, callback) {
    element.addEventListener(eventName, callback)
}


var toggleClass = function(element, className) {
    if (element.classList.contains(className)) {
        element.classList.remove(className)
    } else {
        element.classList.add(className)
    }
}


var bindAll = function(selector, eventName, callback) {
    var elements = document.querySelectorAll(selector)
    for(var i = 0; i < elements.length; i++) {
        var e = elements[i]
        bindEvent(e, eventName, callback)
    }
}


// find 函数可以查找 element 的所有子元素
var find = function(element, selector) {
    return element.querySelector(selector)
}


var bindEventToggles = function() {
    var selector = '.gua-menu-toggle'
    bindAll(selector, 'click', function(event){
        log('click button')
        // 找到自己这个菜单的 gua-menu-content
        var p = event.target.parentElement
        var c = find(p, '.gua-menu-content')
        // 开关 gua-hide class
        toggleClass(c, 'gua-hide')
    })
}


bindEventToggles()

---