移动端导航栏有个很常见的折叠菜单,bootstrap有collapse插件实现,jQuery UI有Accordion组件。最近用js无插件实现一个这样的效果。
探究历程
display:none;
直接采用display,虽然实现了控制容器的显示和隐藏,但是效果生硬。
//jq或者zepeto的hide和show方法就是采用这个属性
$('#el').hide();
$('#el').show();
/**
show: function() {
return this.each(function() {
//清除元素的内联display="none"的样式
this.style.display == "none" && (this.style.display = null)
//当样式表里的该元素的display样式为none时,设置它的display为默认值
if (getComputedStyle(this, '').getPropertyValue("display") == "none") this.style.display = defaultDisplay(this.nodeName) //defaultDisplay是获取元素默认display的方法
})
},
hide: function() {
return this.css("display", "none")
}
**/