jquery - jquery设置幻灯片效果的方法

Question

我设计了一个页面。如何添加 Accordion 菜单的功能。但无法理解我的问题。

像这张图

Like one panel was opened always

And slide effect to this menu.

提前致谢:)

    jQuery(document).ready(function () {
        $(".accordion").click(function () {
            if (!$(this).hasClass("active")) {
                var oldAcc = $(".accordion.active");
                oldAcc.toggleClass("active");
                oldAcc.next().toggleClass("show");
            }
            $(this).toggleClass("active");
            $(this).next().toggleClass("show");
        });
    });

.boot-accordian button.accordion {
    background-color: #fff;
    color: #363636;
    cursor: pointer;
    width: 100%;
    border: 1px solid #d7d7d7;
    text-align: left;
    outline: none;
    font-size: 18px;
    font-weight: 600;
    transition: 0.4s;
    padding: 20px;
    margin-top: 20px;
}
.boot-accordian .para {
    padding-left: 1px;
    padding-top: 2%;
    font-size: 15px;
}
.boot-accordian button.accordion.active{
    background-color: #0097C7;
    color: #fff;
}
.boot-accordian button.accordion:after {
    font-size: 20px;
    font-weight: 800;
    font-family: FontAwesome;
    content: "\f106";
    color: #97999c;
    float: right;
}
.boot-accordian button.accordion.active:after {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 20px;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
}
.boot-accordian div.panel {
    padding: 0 18px;
    display: none;
    background-color: #fff;
    color: #363636;
    border: 1px solid #d7d7d7;
    border-top: 0;
    border-radius: 0;
}
.boot-accordian div.panel.show {
    display: block;
    margin: 0;
    background-color: #fff;
    color: #363636;
    padding-bottom: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boot-accordian">
<button class="accordion">How do I call Eventbooking?</button>
 <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion active">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</button>
                                        <div class="panel show">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Quisque ullamcorper lectus eget justo tincidunt, at scelerisque nulla malesuada?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Etiam semper orci vitae nisi vestibulam varius?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Nullam ac nulla vel dui blandit blandit?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Maecenas fermentum erac ac vulputate  fermentum?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Duis sed nibh eget mauris ultrices scelerisque?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Mauris at tellus id ante tempor scelerisque?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Suspendise et lorem non nisi vehicula convallis?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                        <button class="accordion">Morbi eget dolor quis ligula blandit malesuada?</button>
                                        <div class="panel">
                                            <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
                                a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem  eget magna lacinia gravida</p>
                                        </div>
                                    </div>

Answer 1

换你jquery

jQuery(document).ready(function () {
        $(".accordion").click(function () {
            if (!$(this).hasClass("active")) {
                var oldAcc = $(".accordion.active");
                oldAcc.toggleClass("active");
                oldAcc.next().slideToggle();
            }
            $(this).toggleClass("active");
            $(this).next().slideToggle();
        });
    });