首页jquery竖向手风琴

jquery竖向手风琴

时间: 2024-01-11 22:04:50 浏览: 83

以下是一个使用jQuery实现的竖向手风琴的例子： ```html <!DOCTYPE html> <html> <head> <title>Vertical Accordion</title> <style> .accordion { width: 200px; } .accordion h3 { background-color: #f5f5f5; color: #333; cursor: pointer; padding: 10px; margin: 0; } .accordion .content { display: none; padding: 10px; background-color: #fff; color: #333; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.accordion h3').click(function() { $(this).next('.content').slideToggle(); $(this).toggleClass('active'); }); }); </script> </head> <body> <div class="accordion"> <h3>Section 1</h3> <div class="content"> <p>Content for section 1.</p> </div> <h3>Section 2</h3> <div class="content"> <p>Content for section 2.</p> </div> <h3>Section 3</h3> <div class="content"> <p>Content for section 3.</p> </div> </div> </body> </html> ``` 这个例子中，我们使用了jQuery的`slideToggle()`方法来实现手风琴效果。当点击标题（`<h3>`标签）时，对应的内容（`<div class="content">`标签）会展开或收起。同时，我们使用`toggleClass()`方法来切换标题的样式，以实现展开和收起时的样式变化。

阅读全文