首页jquery横向手风琴图片div代码

jquery横向手风琴图片div代码

时间: 2024-10-16 19:05:47 浏览: 38

jQuery可以轻松创建一个横向手风琴效果，通常通过CSS和JavaScript配合来实现。以下是一个简单的HTML结构和基本的jQuery代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery横向手风琴</title> <style> .accordion { width: 50%; display: flex; flex-direction: column; overflow-x: auto; -webkit-overflow-scrolling: touch; } .slide { width: 100%; height: 200px; /* 你可以根据需要调整高度 */ background-size: cover; cursor: pointer; } </style> </head> <body> <div class="accordion"> <div class="slide" data-content="内容1"> 图片1 </div> <div class="slide" data-content="内容2"> 图片2 </div>  </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.slide').click(function(e) { e.preventDefault(); var content = $(this).data('content'); // 获取当前激活的状态，比如添加一个active类 var isActive = $('.slide.active'); if (isActive.length > 0) { isActive.removeClass('active'); } // 展示新的内容并添加active类 $(this).addClass('active').next('.slide').slideToggle(300); }); }); </script> </body> </html> ``` 在这个例子中，当用户点击每个图片时，对应的`<div>`内容会切换显示隐藏。`.slide.active`的选择器用于设置当前展开的滑块样式。

阅读全文