【JQuery】jQuery自制简易手风琴效果(附实现原理)

最新推荐文章于 2022-11-20 20:53:52 发布

原创

最新推荐文章于 2022-11-20 20:53:52 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#手风琴

本文分享了一种使用jQuery实现的手风琴效果，适用于网页导航。通过鼠标点击span标签来控制子目录的展开和收缩，利用on类作为展开状态标记，并动态调整提示符。

手风琴效果经常会用在网页左侧的导航栏，当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版，下面就分享一个自己制作的简易手风琴效果，没有用图片，背景颜色也是随意设定的，在实际项目中大家可适当修改。

效果图：

实现原理：

1、当鼠标点击span标签（即一级导航）时，先判断子目录li是否已经展开（此处使用一个on类来做标记）；
2、如果是，则收缩当前的li，移出on类标记，修改span右边的提示符为加号；
3、如果不是，则展开当前的li，增加on类标记，修改span右边的提示符为减号。

源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>自制手风琴</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
	body,ul,li{margin: 0 auto;padding: 0;