Fe-12-1
Fe-12-2 toggle
Toggle
-
效果:
toggle.gif - toggle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>toggle</title>
<style>
.gua-hide {
display: none;
}
.gua-menu-content {
height: 100px;
border: 1px solid red;
}
.gua-item {
/*display: inline-block;*/
/*opacity: 0.6;*/
filter: grayscale(100%)
}
.gua-item.gua-highlight {
filter: initial;
/*opacity: 1;*/
}
</style>
</head>
<body>
<!-- 1, 點(diǎn)擊顯示的菜單 -->
<div class="gua-1">
<div class="gua-menu">
<button class="gua-menu-toggle">點(diǎn)擊展開(kāi)詳情</button>
<div class="gua-menu-content">
詳情
</div>
</div>
<div class="gua-menu">
<button class="gua-menu-toggle">點(diǎn)擊展開(kāi)詳情</button>
<div class="gua-menu-content">
詳情
</div>
</div>
</div>
<script src=toggle.js></script>
</body>
</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 函數(shù)可以查找 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')
// 找到自己這個(gè)菜單的 gua-menu-content
var p = event.target.parentElement
var c = find(p, '.gua-menu-content')
// 開(kāi)關(guān) gua-hide class
toggleClass(c, 'gua-hide')
})
}
bindEventToggles()
