(四)原生js案例之手风琴效果

手风琴效果也是业务开发中一个比较常见的效果,类似QQ那样的折叠功能

效果预览

请添加图片描述

代码实现

  • 必要的css
* {margin: 0;padding: 0;}body {height: 100vh;background: linear-gradient(200deg, #ffff00 0%, #ee82ee 100%);overflow: hidden;}ul {list-style: none;}#List {margin: 30px auto;width: 240px;/* border: 1px solid #ccc; */}h2 {background: linear-gradient(241deg, #ffc3ff 0%, #8ec5fc 100%);padding: 10px;cursor: pointer;font-size: 16px;color: #fff;}h2.active {background: linear-gradient(0deg, #9be15d 0%, #00e3ae 100%);}h2 span {margin-right: 10px;}#List ul {display: none;border: 1px solid #8ec5fc;background-color: #fff;}#List > li {border-bottom: #fff 1px solid;cursor: pointer;}#List ul li {padding: 10px;border-bottom: #8ec5fc 1px solid;}#List ul li.l-active{background-color: #9be15d ;color:#fff}
  • 静态页面
<ul id="List"><li class="item"><h2><span></span>我的好友</h2><ul><li>张三</li><li>李四</li><li>王五</li><li>赵六</li></ul></li><li class="item"><h2><span></span>我的朋友</h2><ul><li>张三11</li><li>李四22</li><li>王五33</li><li>赵六44</li></ul></li><li class="item"><h2><span></span>我的企业</h2><ul><li>张三11</li><li>李四22</li><li>王五33</li><li>赵六44</li></ul></li></ul>
  • 核心逻辑,实现方式多种多样,分别做了尝试,可以选择适合自己思维的方式去做,最终都能出效果

    • 方式一:
    window.onload = function () {//获取元素let oList = document.getElementById('List')let aItem = oList.getElementsByTagName('li')let aUl = oList.getElementsByTagName('ul')let oH2 = oList.getElementsByTagName('h2')let oSpan = oList.getElementsByTagName('span')let oLi = document.querySelectorAll('.item li')for (var  i = 0; i < oH2.length; i++) {oH2[i].index = ioH2[i].onclick = function () {if (this.className == 'active') {for (let j = 0; j < oH2.length; j++) {aUl[j].style.display = 'none'oSpan[j].innerHTML = '▶'oH2[j].className = ''}} else {for (let j = 0; j < oH2.length; j++) {aUl[j].style.display = 'none'oSpan[j].innerHTML = '▶'oH2[j].className = ''}aUl[this.index].style.display = 'block'oSpan[this.index].innerHTML = '▼'oH2[this.index].className = 'active'}}}}// 点击好有名称切换classfor (var i = 0; i < oLi.length; i++) {oLi[i].index = ioLi[i].onclick = function () {//清空所有li的classfor (let j = 0; j < oLi.length; j++) {oLi[j].classList.remove('l-active')}this.classList.add('l-active')}}
    
    • 方式二:
      for (let i = 0; i < oH2.length; i++) {oH2[i].index = ioH2[i].isFlag = falseoH2[i].onclick = function () {if (aUl[this.index].isFlag) {for (let j = 0; j < oH2.length; j++) {aUl[j].style.display = 'none'aUl[j].isFlag = falseoSpan[j].innerHTML = '▶'}} else {for (let j = 0; j < oH2.length; j++) {aUl[j].style.display = 'none'aUl[j].isFlag = falseoSpan[j].innerHTML = '▶'}aUl[this.index].style.display = 'block'aUl[this.index].isFlag = trueoSpan[this.index].innerHTML = '▼'}}}
    
    • 方式二:
    for (let i = 0; i < oH2.length; i++) {oH2[i].index = ioH2[i].isFlag = falseoH2[i].onclick = function () {if (aUl[this.index].style.display == 'block') {for (let j = 0; j < oH2.length; j++) {aUl[j].style.display = 'none'}} else {for (let j = 0; j < oH2.length; j++) {aUl[j].style.display = 'none'}aUl[this.index].style.display = 'block'}}}
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/47684.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

更新weibo sdk(去掉so以适配Android 15的16K Page Size的版本)记录

1、修改模块的gradle 从 implementation io.github.sinaweibosdk:core:13.6.1aar 改为 implementation io.github.sinaweibosdk:core:13.10.4aar 同步、运行报错&#xff1a; Didnt find class "androidx.core.content.FileProvider" 解决&#xff1a;据此提示…

Stable Diffusion:质量高画风清新细节丰富的二次元大模型二次元插图

今天和大家分享一个基于Pony模型训练的二次元模型&#xff1a;二次元插图。关于该模型有4个不同的分支版本。 1.5版本&#xff1a;loar模型&#xff0c;推荐底模型niji-动漫二次元4.5。 xl版本&#xff1a;SDXL模型版本 mix版本&#xff1a;光影减弱&#xff0c;减少SDXL版本…

C/C++ yaml 库

文章目录 一、yaml 介绍1.1 yaml 介绍1.2 yaml 教程1.3 yaml 在线工具1.4 yaml 出现背景 二、C/C yaml 库选型2.2 libfyaml2.3 yaml-cpp 一、yaml 介绍 1.1 yaml 介绍 YAML&#xff08;YAML Ain’t Markup Language&#xff09;是一种人类可读的数据序列化格式&#xff0c;通…

客户在哪儿AI的ToB获客服务和AI外呼机器人的有何不同

客户在哪儿AI全面提供服务已经快一个月了&#xff0c;我们收到了一些反馈。其中问的最多也是最有意思的问题就是&#xff0c;客户在哪儿AI与市面上其他几类服务于B端的科技产品有什么不同。既然如此&#xff0c;我们决定连出几篇文章把这件事给讲清楚。本期讲——客户在哪儿AI的…

模型训练中出现loss为NaN怎么办?

文章目录 一、模型训练中出现loss为NaN原因1. 学习率过高2. 梯度消失或爆炸3. 数据不平衡或异常4. 模型不稳定5. 过拟合 二、 针对梯度消失或爆炸的解决方案1. 使用torch.autograd.detect_anomaly()2. 使用 torchviz 可视化计算图3. 检查梯度的数值范围4. 调整梯度剪裁 三、更具…

uni-app开发日志:unicloud使用时遇到的问题解决汇总(不断补充)

插件安装后提示与原数据库表冲突&#xff08;2024.7.18&#xff09; 安装uni-admin后再安装uni-cms&#xff0c;在uni-admin中添加好菜单&#xff0c;结果提示该错误 回到hbuilder中uniCloud/database中找到冲突的部分 比较一下&#xff0c;选中老的删除 opendb-news-articl…

HarmonyOS根据官网写案列~ArkTs从简单地页面开始

Entry Component struct Index {State message: string 快速入门;build() {Column() {Text(this.message).fontSize(24).fontWeight(700).width(100%).textAlign(TextAlign.Start).padding({ left: 16 }).fontFamily(HarmonyHeiTi-Bold).lineHeight(33)Scroll() {Column() {Ba…

eclipse免安装版64位 2018版本

前言 eclipse是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言&#xff0c;它只是一个框架和一组服务&#xff0c;用于通过插件组件构建开发环境。 一、下载地址 下载地址&#xff1a;http://source/download 选择如下图红色框文件内容下载 二、安装步骤 1、…

【算法】数组中的第K个最大元素

难度&#xff1a;中等 题目&#xff1a; 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题…

Day16_集合与迭代器

Day16-集合 Day16 集合与迭代器1.1 集合的概念 集合继承图1.2 Collection接口1、添加元素2、删除元素3、查询与获取元素不过当我们实际使用都是使用的他的子类Arraylist&#xff01;&#xff01;&#xff01; 1.3 API演示1、演示添加2、演示删除3、演示查询与获取元素 2 Iterat…

分词任务介绍-(十)

分词任务 中文分词正向最大匹配实现方式一实现方式二 反向最大匹配双向最大匹配jieba分词上述分词方法的缺点总结基于机器学习 总结分词技术经验总结 中文分词 正向最大匹配 分词的步骤 1.收集整理一个词表&#xff0c;类似于字典。如下图 2.对于待分词的句子&#xff0c;或者…

k8s二次开发-kubebuiler一键式生成deployment,svc,ingress

一 Kubebuilder环境搭建 注&#xff1a;必须在当前的K8S集群有 nginx这个ingressclass rootk8s:~# kubectl get ingressclass NAME CONTROLLER PARAMETERS AGE nginx k8s.io/ingress-nginx <none> 19h1.1 下载kubebuilder wget https://gi…

机器学习西瓜书笔记(一)

机器学习西瓜书笔记 第一章(chapter 1) 绪论 (参考机器学习西瓜书)第一节(section 1)引言第二节(section 2)基本术语第三节(section 3)假设空间第四节(section 4)归纳偏好第五节(section 5)发展历程第六节(section 6)应用现状第一章(chapter 1) 绪论 (参考机…

监测vuex中state的变化

在Vuex中&#xff0c;如果你想要监测state的变化并在变化时调用相应的函数&#xff0c;有几种方法可以实现这个需求。但需要注意的是&#xff0c;Vuex官方推荐的方式是通过getter来派生state的新状态&#xff0c;或者通过action来响应state的变化。不过&#xff0c;如果你确实需…

C++编程小游戏------斗罗大陆(1)魂力测评和武魂觉醒

#include <bits/stdc.h> #include <windows.h> using namespace std; string name,wh; int hl,wh1; int gj50,fy50,jy5000,hp60; int main() { // 共十个武魂["昊天锤","蓝电霸王龙","七杀剑","火凤凰","尖尾雨燕&qu…

ES6 数值的扩展(十八)

1. 二进制和八进制字面量 特性&#xff1a;可以直接在代码中使用二进制&#xff08;0b 或 0B&#xff09;和八进制&#xff08;0o 或 0O&#xff09;字面量。 用法&#xff1a;简化二进制和八进制数值的表示。 const binaryNumber 0b1010; // 二进制表示 10 const octalNumb…

麒麟系统arm架构上部署开发环境。

今天早早来到公司&#xff0c;这也是再公司搬址前在老地址待得最后一天&#xff0c;昨天把前面重要的一个任务也完成的差不多了&#xff0c;遂现在记录一下。 收到任务&#xff0c;要将公司的开发环境和生产环境配置在银河麒麟v10服务器上。这个服务器是向华为申请得到的&…

实战:Eureka的概念作用以及用法详解

概叙 什么是Eureka&#xff1f; Netflix Eureka 是一款由 Netflix 开源的基于 REST 服务的注册中心&#xff0c;用于提供服务发现功能。Spring Cloud Eureka 是 Spring Cloud Netflix 微服务套件的一部分&#xff0c;基于 Netflix Eureka 进行了二次封装&#xff0c;主要负责…

高性能分布式IO系统BL205 OPC UA耦合器

边缘计算是指在网络的边缘位置进行数据处理和分析&#xff0c;而不是将所有数据都传送到云端或中心服务器&#xff0c;这样可以减少延迟、降低带宽需求、提高响应速度并增强数据安全性。 钡铼BL205耦合器就内置边缘计算功能&#xff0c;它不依赖上位机和云平台&#xff0c;就能…

基于 Go1.19 的站点模板爬虫:构建与实战

引言 随着互联网的发展&#xff0c;网络爬虫已成为数据抓取和分析的重要工具。Go&#xff08;Golang&#xff09;语言凭借其高效、简洁的特性&#xff0c;成为构建爬虫的热门选择之一。本文将引导你使用 Go1.19 版本&#xff0c;构建一个基于站点模板的网页爬虫&#xff0c;以…