用CSS实现"点击"显示隐藏效果

最新推荐文章于 2025-06-26 11:49:03 发布

weixin_34029680

最新推荐文章于 2025-06-26 11:49:03 发布

阅读量9k

点赞数 2

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cd252356fb9a031ff0d2faa

本文介绍了如何使用CSS来创建一个点击后显示隐藏内容的效果，区别于常见的hover触发的下拉菜单，着重讲解了通过点击事件来切换元素的可见状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS实现点击下拉,看清楚题目哦，是点击下拉。不是hover下拉。

<style lang="">
    ul>li>ul{
      display: none;
    }
    input[type=checkbox]{
      display: none;
    }
    ul li input[type=checkbox]:checked+ul{
      display: block;
    }
 </style>
 <ul>
    <li>
      <label for="checkbox1" >选择一</label>
      <input type="checkbox" id='checkbox1' checked="true">
      <ul>
        <li>选择一 ---1</li>
        <li>选择一 ---2</li>
        <li>选择一 ---3</li>
      </ul>
    </li>
    <li>
        <label for="checkbox2">选择二</label>
        <input type="checkbox" id='checkbox2'>
        <ul>
          <li>选择二 ---1</li>
          <li>选择二 ---2</li>
          <li>选择二 ---3</li>
        </ul>
    </li>
    <li>
        <label for="checkbox3">选择三</label>
        <input type="checkbox" id='checkbox3'>
        <ul>
          <li>选择三 ---1</li>
          <li>选择三 ---2</li>
          <li>选择三 ---3</li>
        </ul>
    </li>
  </ul>
复制代码