html+js+css实现点击展开显示

最新推荐文章于 2025-05-08 15:13:45 发布

原创

最新推荐文章于 2025-05-08 15:13:45 发布 · 4.4k 阅读

3 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用HTML、JavaScript和CSS实现点击按钮或文字后展开隐藏的内容，详细阐述了实现思路和提供了相关代码示例，展示了最终效果。

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

实现思路：首先我们需要定义一个容器来存放内容；将溢出内容先隐藏，当点击按钮或文字时使原先定义的容器变大，并且能放下所有内容。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>下拉与收起</title>
        <!--引用js-->
       <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
           
            crossorigin="anonymous">
    </script>
        <style type="text/css">
        	body
       {
           margin: 0 auto;
           padding: 0;
       }
       a:focus
       {
           outline: none;
       }
       #showhide
       {
           background: yellow;
           color: white;
           width: 600px;
           display: block;
           margin: 0 auto;
           padding: 5px;
           font-size: 20px;
            
           height: auto;
           font-family: "微软雅黑";
       }
       .slide
       {