jQuery实现横版手风琴效果

作者：System 时间：2024年08月21日分类：所有,jquery 字数：1434

以下是一个简单的jQuery实现横版手风琴效果的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>横版手风琴效果</title>
<style>
    .accordion {
        width: 300px;
        margin: 50px auto;
    }
    .accordion-item {
        background-color: #f9f9f9;
        color: #444;
        cursor: pointer;
        padding: 18px;
        border: 1px solid #ccc;
        text-align: left;
        margin-top: -1px;
    }
    .accordion-item:first-child {
        margin-top: 0;
    }
    .accordion-content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
    }
</style>
</head>
<body>
 
<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-title">标题1</div>
        <div class="accordion-content">
            内容1...
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-title">标题2</div>
        <div class="accordion-content">
            内容2...
        </div>
    </div>
    <!-- 更多的.accordion-item -->
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.accordion-item').click(function() {
            $(this).find('.accordion-content').slideToggle('fast');
        });
    });
</script>
</body>
</html>

这段代码中，我们定义了一个基本的手风琴结构，并通过jQuery实现了点击标题时内容区域的展开和折叠。.slideToggle('fast')函数用于在当前内容区域可见时隐藏它，不可见时显示它，'fast'参数意味着动画执行速度很快。

jQuery实现横版手风琴效果

评论已关闭

推荐阅读