如何使用HTML和CSS的可折叠列表?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1886)

我有一个使用HTML和CSS实现的可折叠列表。这个列表正常工作,但我需要稍微修改一下。

每当我单击列表中的某个项目时,它就会展开。但是,当我单击同一列表中的另一项时,先前展开的元素将被折叠,而单击的元素将被展开。

请帮助我应用该行为,使你可以同时展开多个列表项。

我希望它只在HTML和CSS中完成。

以下是我目前的实现。CSS样式:

.row { vertical-align: top; height: auto !important; }
list { display: none; }
.show { display: none; }
.hide:target + .show { display: inline; }
.hide:target { display: none; }
.hide:target ~ .list { display:inline; }
@media print { .hide, .show { display: none; } }

和HTML标记:

<div class="row">
  <a href="#hide1" class="hide" id="hide1">Expand</a>
  <a href="#show1" class="show" id="show1">Collapse</a>
  <div class="list">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>
提问于
用户回答回答于

如果使用现代浏览器,只需使用HTML 5,如下所示:

<details>
  <summary>See More</summary>
  This text will be hidden if your browser supports it.
</details>

热门问答

实时音视频如何实现画中画的效果?

Cstar

腾讯 · 产品经理 (已认证)

推荐
开启大小画面双路编码模式的接口如下: iOS&Mac:enableEncSmallVideoStream Android:enableEncSmallVideoStream Windows(C++):enableSmallVideoStream Windows(C#):enab...... 展开详请

有没有可以提升运维效率的服务器管理软件,主要功能有哪些,求推荐?

BT宝塔面板主要功能有: 1)   一键配置服务器环境(LAMP/LNMP) 2)   一键安全重启 3)   一键创建管理网站、ftp、数据库 4)   一键配置(定期备份、数据导入、伪静态、301、SSL、子目录、反向代理、切换PHP版本) 5)   一键安装常用PHP扩展...... 展开详请

The parameter `SecretKey` is not recognized?

zqfan

腾讯 · 高级工程师 (已认证)

推荐已采纳

报错的意思是参数SecretKey无法识别,接口实际未定义这个字段。

SecretKey是你的密钥,相当于你的账户密码,调用API时是不需要传递的。

桌面浏览器版和安卓版能进入一个实时音视频房间么?

人生的旅途辣鸡前端
推荐已采纳
https://cloud.tencent.com/document/product/647/43019 image.png ... 展开详请

智聆口语评测返回结果里面的评分为0?

1,音频文件要符合16khz采样率16bit位深单声道,如果是mp3文件码率要高于48kbps,否则评分可能会出现偏低或者0 2,VoiceType是否和传入的音频文件一致,文本和音频是否一致. 3,看下sessionId是否在每次评测的时候都是一样的结果导致的   4,在初次...... 展开详请

MGOBE Team Room 和Room 的区别是什么?

推荐已采纳
您好,createRoom 的 teamNumber 为1,如果需要使用不同的teamId区分玩家,可以使用createTeamRoom。roomType这个参数是标志,例如在matchRoom接口就需要输入roomtype作为参数,之后从房间列表中找到 roomType和max...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券