首页html 多层展开,jquery实现同一页面多个DIV层展开收缩功能

html 多层展开,jquery实现同一页面多个DIV层展开收缩功能

时间: 2023-12-05 18:05:55 浏览: 79

可以使用jQuery的`slideToggle()`方法来实现同一页面多个DIV层的展开收缩功能。具体步骤如下： 1. 给需要展开收缩的DIV层添加一个class类，比如"expandable"。 2. 在jQuery中使用`$(".expandable")`来选择所有的需要展开收缩的DIV层。 3. 使用`click()`方法来监听DIV层的点击事件。 4. 在点击事件中使用`slideToggle()`方法来展开或收缩DIV层。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>HTML多层展开，jQuery实现同一页面多个DIV层展开收缩功能</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> .expandable { background-color: #f0f0f0; padding: 10px; margin-bottom: 10px; cursor: pointer; } .expandable-content { display: none; } </style> </head> <body> <div class="expandable"> <h3>第一层</h3> <div class="expandable-content"> <p>第一层内容</p> </div> </div> <div class="expandable"> <h3>第二层</h3> <div class="expandable-content"> <p>第二层内容</p> </div> </div> <div class="expandable"> <h3>第三层</h3> <div class="expandable-content"> <p>第三层内容</p> </div> </div> <script type="text/javascript"> $(document).ready(function() { $(".expandable").click(function() { $(this).find(".expandable-content").slideToggle(); }); }); </script> </body> </html> ``` 在上述代码中，我们使用了一个`.expandable`的class来选择需要展开收缩的DIV层，并且在点击事件中使用了`slideToggle()`方法来展开或收缩DIV层。同时，我们也添加了一些CSS样式来美化界面。

阅读全文