Question

:)

我有问题。我不知道如何制作嵌套式手风琴。我特别是在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或两者兼而有之）。我已经看过很多这样的例子，我选择了这个，我想做第一个嵌套手风琴。 :) 你能帮我吗？：○ 谢谢！ :)

P.S。我在WP工作

Answer 1

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

我只有一个问题。刷新后它是开放的。但我希望它能够关闭。

嵌套手风琴

1 个答案: