原生js实现手风琴效果
更新时间：2021年09月16日 09:40:41 作者：梦里～花开又半夏…
这篇文章主要为大家详细介绍了原生js实现手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在实际网页开发中，手风琴出现频率也居高。
简单地做了一个手风琴，但觉得它的过渡效果没实现，内容列表出现得很突兀，效果图如下：
实现代码如下：
<!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>手风琴</title>
<style>
body,
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.nav {
width: 150px;
height: 310px;
margin-top: 30px;
margin-left: 50px;
font-size: 20px;
border: 1px solid #ccc;
}
.nav>ul>li:nth-child(2n+1) {
background-color: cadetblue;
}
.nav>ul>li:nth-child(2n+2) {
height: 160px;
display: none;
transition: all 1s;
}
.nav>ul>#selected {
background-color: rgb(46, 115, 117);
}
.nav>ul>li:nth-child(2) {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li id="selected">标题1</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题2</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题3</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题4</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题5</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>标题6</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</div>
<script>
var title = document.querySelectorAll(".nav>ul>li:nth-child(2n+1)");
for (var i = 0; i < title.length; i++) {
title[i].onmouseover = function () {
for (var j = 0; j < title.length; j++) {
title[j].nextElementSibling.style.display = "none";
title[j].id = "";
}
this.id = "selected";
this.nextElementSibling.style.display = "block";
}
}
</script>
</body>
</html>
过渡效果加了代码：transition: all 1s;
但并未起作用，有点疑问？！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序实现运动步数排行功能（可删除），实现代码也很简单,需要的朋友可以参考下2018-07-07
这篇文章主要为大家详细介绍了微信小程序实现侧边分类栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
下面小编就为大家带来一篇js时间比较 js计算时间差的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
如何实现浏览器上的右键菜单...2006-07-07
最近在工作当中遇到一个问题 有个页面需要添加一个浏览历史记录功能，具体来说就是要记录下用户在此网站的点击历史 并把它们降序排列出来（只显示前6个浏览历史而且不能重复）。2008-09-09
这篇文章主要为大家详细介绍了js实现简单的轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了Javascript点击按钮随机改变数字和其字体的颜色，实现后的效果很不错，具有一定的参考价值，有需要的可以参考借鉴，下面来一起看看。2016-09-09
这篇文章主要介绍了JavaScript数组的使用方法，数组（Array）是有序的元素序列。若将有限个类型相同的变量的集合命名，那么这个名称为数组名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
需要隐藏input file然后获取它的值，但连jquery都无法获取它的值，下面与大家分享下使用js的具体获取方法，感兴趣的朋友可以参考下哈2013-05-05
这篇文章主要介绍了微信小程序实现的五星评价功能,结合实例形式分析了微信小程序五星评价相关的界面布局、事件响应等操作技巧,需要的朋友可以参考下2019-04-04
最新评论