首页jquery 网格手风琴代码

jquery 网格手风琴代码

时间: 2024-12-18 09:13:08 浏览: 8

jQuery网格手风琴通常是指利用jQuery库实现的一种常见的网页布局效果，它将网格中的某一项内容折叠成“手风琴”样式，点击时可以展开或折叠。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .grid-item { display: flex; border: 1px solid #ccc; padding: 10px; cursor: pointer; } .expanded { height: auto; /* 或者设置为具体的高度 */ } </style> </head> <body> <div class="grid-container"> <div class="grid-item active" data-content="这是第一项内容"> 展开我 </div>  </div> <script> $('.grid-item').click(function() { $(this).toggleClass('expanded'); var content = $(this).data('content'); if ($(this).hasClass('expanded')) { // 展开时显示内容 $('.grid-item-content').text(content); } else { // 折叠时隐藏内容 $('.grid-item-content').empty(); } }); </script> <div class="grid-item-content hidden">当前内容显示在这里...</div> </body> </html> ``` 在这个示例中，`.grid-item`代表每个网格项，点击时通过`.toggleClass('expanded')`切换其是否展开。`data-content`属性用于存储需要展示的内容。`.grid-item-content.hidden`则是用来存放或隐藏内容的地方。

阅读全文