目标伪类选择器实现手风琴效果

最新推荐文章于 2022-04-02 04:45:00 发布
最新推荐文章于 2022-04-02 04:45:00 发布
阅读量536 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eternal_shallow/article/details/64920575
版权

Paste_Image.png

闲话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .accordionMenu{
            background: #fff;
            color: #424242;
            font: 12px Arial,Verdana,sans-serif;
            margin: 0 auto; 
           padding: 10px;
            width: 500px;
        } 
       .accordionMenu h2{
            margin: 5px 0;
            padding: 0; 
           position: relative;
        } 
       .accordionMenu h2:before{
            border: 5px solid transparent;
            border-top-color: #fff; 
           content: '';
            height: 0;
            position: absolute;
            right: 10px; 
           top: 15px;
            width: 0;
        } 
       .accordionMenu h2 a{
            background: #8f8f8f; 
           border-radius: 5px; 
           color: #424242;
            display: block; 
           font-size: 13px;
            font-weight: normal; 
           margin: 0; 
           padding: 10px;
            text-shadow:  2px 2px 2px #aeaeae;
            text-decoration: none;
        } 
       .accordionMenu :target h2 a,
        .accordionMenu h2 a:focus,
        .accordionMenu h2 a:hover,
        .accordionMenu h2 a:active{
            background: #2288dd;
            color: #ffffff;
        } 
       .accordionMenu p{
            margin:  0;
            height: 0;
            overflow: hidden;
            padding: 0 10px; 
           transition:  height 0.5s ease-in;
        } 
       .accordionMenu :target p{
            height: 100px;
            overflow: auto;
        }
        .accordionMenu :target h2:before{
            border-color:  transparent transparent transparent #fff;
        }
    </style>
</head>
<body>
    <div class="accordionMenu">
        <div class="menuSection" id="brand">
            <h2><a href="#brand">Brand</a></h2> 
           <p>Lorem    ipsum dolor...</p>
        </div>
    </div>
        <div class="accordionMenu"> 
           <div class="menuSection" id="promition">
                <h2><a href="#promition">promition</a></h2> 
               <p>Lorem    ipsum dolor sit amet...</p>
            </div>
        </div>
            <div class="accordionMenu">
                <div class="menuSection" id="event">
                    <h2><a href="#event">event</a></h2>
                    <p>Lorem    ipsum dolor sit amet...</p>
                </div>
    </div>
</body>
</html>
eternal_shallow
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS目标伪类选择器
weixin_46421045的博客
03-19 274
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} a{ display:inline-block...
手风琴效果
06-27
对于CSS，我们可以利用伪类选择器如`:hover`和`:active`来控制元素的状态变化，同时结合`transition`属性创建平滑的动画效果。而JavaScript则能提供更复杂的交互，例如通过监听用户的点击事件来控制内容的展开和折叠...
CSS3目标伪类选择器--实现简单手风琴效果
抽象空间的博客
02-01 2205
总结自：图解CSS3中的实战体验 以前制作手风琴效果需要依赖js脚本，功能强大的CSS3的目标伪选择器可以直接实现同样的效果。 通过目标伪类选择器“E:target”，显示和隐藏不同栏目内容： 先上一幅效果图： 全部代码如下:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content=
目标伪类选择器target——手风琴效果
大老虎Picky的博客
07-19 630
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;手风琴&lt;/title&gt; &lt;link rel="stylesheet" href="shouf
使用CSS3伪类选择器实现简单手风琴效果，与其功能的介绍
shalltear的博客~
12-22 346
1.展示 2.原理 主要使用了C3选择器中的两个： ①:not()：不包含，如div:not(.test)，就是在div中选中不包含有test类的，例如可以配合E:not(:last-of-type)来排除掉最后一个元素并选中剩余的; ②:target：目标的id变为location.hash的值时，也就是锚点选中它时 来选中它 的一种选择器，例如锚点可以通过标签的href里加#来改变...
js css3全屏手风琴特效.zip
07-04
同时，选择器的增强（如伪类和组合选择器）可以帮助更精确地控制各个面板的状态。 总的来说，"js css3全屏手风琴特效"是一个结合了JavaScript动态行为和CSS3视觉效果的网页组件，其目标是提供一个优雅的、全屏的、...
jQuery 选择器项目实例分析及实现代码
12-11
2. `#idaccordion span:contains(“‘+title+'”)`: 这个选择器用于找到包含特定文本（如“原始报文查询”）的span元素，这是通过`:contains()`伪类实现的。 3. `.parent().parent().addClass(“selected”)`: 这段...
前端样式的手风琴非常好用
08-20
手风琴效果通常用于网站的FAQ（常见问题解答）、导航菜单或者详细信息的展开与隐藏，让用户能够有选择性地查看感兴趣的部分，而不会被过多的信息淹没。 手风琴的实现主要基于HTML、CSS和JavaScript，这三者是前端...
FAQ-手风琴卡
02-11
这可以通过使用类选择器和伪类来实现，例如`:hover`和`:active`，以便在鼠标悬停和点击时改变按钮的样式。 最后，JavaScript（可能是使用jQuery或其他库如Bootstrap）为手风琴卡添加交互性。通过监听点击事件，当...
jquery手风琴特效.zip
08-27
接着，我们探讨JavaScript和jQuery如何实现手风琴效果。基本思路是，当用户点击一个面板的标题时，展开对应的面板内容，同时关闭其他已展开的面板。这涉及到事件监听、DOM操作和动画效果。jQuery提供了`.click()`...
CSS3响应式垂直手风琴展开收缩特效.zip
11-17
CSS3引入了许多新的选择器和伪类，如`:hover`、`:active`、`:focus`等，它们可以帮助我们更精确地控制元素在不同状态下的样式。在手风琴特效中，可以利用这些选择器来改变展开/收缩状态下的标题样式，增强用户的...
jquery插件库-CSS3垂直手风琴折叠菜单.zip
03-15
1. 选择器：CSS3新增了类选择器、属性选择器和伪类，使得我们可以更精确地控制元素的样式。 2. 动画：使用`transition`和`animation`属性，可以创建平滑的过渡和动画效果，实现菜单项展开和收起时的动态变化。 3. ...
jQuery CSS3网站后台常用左侧垂直手风琴展开菜单
01-16
"jQuery CSS3网站后台常用左侧垂直手风琴展开菜单"就是这样的一个实现，它结合了jQuery库的动态效果和CSS3的新特性，为用户提供了一个易于操作、节省空间的菜单结构。下面我们将深入探讨这个主题，讲解其相关知识点...
CSS3带图标侧边栏垂直手风琴下拉菜单代码.zip
最新发布
09-23
本资源“CSS3带图标侧边栏垂直手风琴下拉菜单代码.zip”提供了一个实现这一目标的实例，它包含了一套可运行的jQuery代码，用于创建一个带有图标的侧边栏垂直下拉菜单。这个菜单不仅美观，而且功能强大，能够增强网站...
html转义字符和选择器(详）
weixin_54107527的博客
04-02 847
目录 转义字符： 伪类选择器 代码解析 伪元素选择器 转义字符： 转义字符：某些字符具有特殊意义，无法直接显示，需要转义 &nbsp； 不断行的空格 &ensp； 半方大的空格 &emsp； 全方大的空格 &lt； 小于 < &gt； 大于 ...
纯CSS3运用target伪类元素制作手风琴效果
CodingNoob
03-29 769
什么是target伪类元素？查了一下W3C原理就是点击相应的A标签触发相应的锚点，从而实现使用target伪类元素选择相应的内容进行实现，实现代码如下。<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * {
目标伪类选择器
weixin_33756418的博客
05-08 194
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
css实现手风琴效果
07-28
要实现手风琴效果，你可以使用CSS的过渡效果和伪类来实现。以下是一个简单的示例： HTML结构： ```html <div class="accordion"> <div class="accordion-item"> <div class="accordion-header">标题1</div> <div class="accordion-content">内容1</div> </div> <div class="accordion-item"> <div class="accordion-header">标题2</div> <div class="accordion-content">内容2</div> </div> <div class="accordion-item"> <div class="accordion-header">标题3</div> <div class="accordion-content">内容3</div> </div> </div> ``` CSS样式： ```css .accordion { width: 300px; } .accordion-item { border: 1px solid #ccc; } .accordion-header { background-color: #f7f7f7; padding: 10px; cursor: pointer; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .accordion-item.active .accordion-content { max-height: 500px; /* 设置一个足够高的值，以展开内容 */ } ``` JavaScript代码（可选）： ```javascript const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { item.addEventListener('click', () => { item.classList.toggle('active'); }); }); ``` 这个示例中，`.accordion` 是手风琴的容器，`.accordion-item` 是每个手风琴项，`.accordion-header` 是标题，`.accordion-content` 是内容。通过给手风琴项添加 `.active` 类来控制内容的展开和收起。 你可以根据实际需求调整样式和动画效果，这只是一个简单的示例供参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值