嵌套手风琴

Nested accordion

本文关键字：手风琴 嵌套      更新时间：2023-09-26

：）

我有个问题。我不知道如何制作嵌套手风琴。我是一名工程师，尤其是JS。这是我的代码：

HTML:
        <div class="accordion">
            <h3><span class="accordion_height">Novembar 2015.</span></h3>
            <div class="pane">
               //This is place where I want to put my nested accordion
            </div>
            <h3><span class="accordion_height">Decembar 2015.</span></h3>
            <div class="pane">
               //This is place where I want to put my nested accordion
            </div>
            <h3><span class="accordion_height">Januar 2016.</span></h3>
            <div class="pane">
                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </div>
            <h3><span class="accordion_height">Februar 2016.</span></h3>
            <div class="pane">
               //This is place where I want to put my nested accordion
            </div>
            <h3><span class="accordion_height">Mart 2016.</span></h3>
            <div class="pane">
               //This is place where I want to put my nested accordion
            </div>
            <h3><span class="accordion_height">April 2016.</span></h3>
            <div class="pane">
               //This is place where I want to put my nested accordion
            </div>
        </div>
JS:
jQuery(document).ready(function ($) {
    //  Accordion Panels
    $(".accordion div").hide();
    setTimeout("$('.accordion div').slideToggle('slow');", 1000);
    $(".accordion h3").click(function () {
        $(this).next(".pane").slideToggle("slow").siblings(".pane:visible").slideUp("slow");
        $(this).toggleClass("current");
        $(this).siblings("h3").removeClass("current");
    });
});

CSS:
.accordion {
    margin:1em 0;
}
.accordion h3 {
    background:#199CD8;
    color:#fff;
    cursor:pointer;
    margin:0 0 1px 0;
    padding:4px 10px;
}
.accordion h3.current {
    background:#C6ED2C;
    cursor:default
}
.accordion div.pane {
    padding:5px 10px
}
.accordion_height{
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

我试着在我写的地方插入同样的手风琴，但它可以打开。我尝试了很多方法，但都没能成功。我不知道我必须改变什么（HMTL或JS，或者两者兼而有之）。我看过很多例子，我选择了这个，我想做我的第一个嵌套手风琴你能帮我吗oThx！：）

p.s.我在WP 工作

I made it finally!! Thank you!! 
I did this: 
var j = jQuery.noConflict();
jQuery(document).ready(function(j){
    //  Accordion Panels
    j(".accordion div").hide();
    setTimeout("j('.accordion div').slideToggle('slow');", 1000);
    j(".accordion h3").click(function () {
        j(this).next(".pane").slideToggle("slow").siblings(".pane:visible").slideUp("slow");
        j(this).toggleClass("current");
        j(this).siblings("h3").removeClass("current");
    });
});
Instead of $ I put only letter j

我只有一个问题。重新构建后，它是打开的。但我希望它关闭。

相关文章：