介绍 & lt; h3>手风琴动画效果& lt;/h3>
& lt;按钮类=癰tn"祝辞选项1 & lt;/button>
& lt; div类=皃1"祝辞
& lt; p>内容1 & lt;/p>
& lt;/div>
& lt;按钮类=癰tn"祝辞选项2 & lt;/button>
& lt; div类=皃1"祝辞
& lt; p>内容2 & lt;/p>
& lt;/div>
& lt;按钮类=癰tn"祝辞选项3 & lt;/button>
& lt; div类=皃1"祝辞
& lt; p>内容3 & lt;/p>
& lt;/div> 。btn {
background - color: # eee;
颜色:# 444;
光标:指针;
填充:18 px;
宽度:100%;
边界:没有;
text-align:左;
大纲:没有;
字体大小:15 px;
过渡:0.4秒;
}
.btn.active。btn:{徘徊
background - color: # ddd;
}
.p1 {
填充:0 18 px;
背景颜色:白色;
max-height: 0;
溢出:隐藏;
过渡:max-height 0.2 s打发走;
} 的var btn=document.getElementsByClassName (“btn");
(var=0;我& lt;btn.length;我+ +){
btn[我]。onclick=function () {
this.classList.toggle (“active");
var面板=this.nextElementSibling;
如果(panel.style.maxHeight) {
panel.style。maxHeight=零;
其他}{
panel.style。maxHeight=面板。scrollHeight +“px";
}
}
}
这篇文章给大家分享的是有关用原生JS实现手风琴导航效果的方法是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
实现手风琴导航效果的思路:当鼠标点击第一个按钮时,第一个按钮里面的内容显示出来,点击第二个按钮时,第二个按钮里面的内容显示出来,以此类推。在JavaScript中,用对循环遍历有多少个按钮,用如果函数判断maxHeight,从而实现按钮内容的显示和隐藏,具体代码如下:
HTML部分:设置三个按钮以及按钮所对应的内容
CSS部分:用CSS美化页面和实现简单效果,比如当鼠标经过按钮时颜色变深
JavaScript部分:这是手风琴效果的关键部分,它决定了按钮内容能不能隐藏和显示
效果如下图所示:
感谢各位的阅读!关于用原生JS实现手风琴导航效果的方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
