Question

我想在我的代码中使用多级切换选项。

为此，我正在使用此plugin。

在该插件中，我找不到multi level toggle。任何人都可以帮我使用这个插件来使用多级切换。

请告诉我这个插件，因为我已经定制了很多。因此，如果你推荐一个不同的插件，对我来说将更加困难。

http://jsfiddle.net/99JbF/5/

Answer 1

检查此JSFiddle链接。

同时检查此link。在这里他们给出了5个不同的嵌套手风琴演示。

以下代码显示Multilevel Jquery Accordion

$(document).ready(function() {
//Initialising Accordion
$(".accordion").tabs(".pane", {
    tabs: '> h2',
    effect: 'slide',
    initialIndex: null
});

//The click to hide function
$(".accordion > h2").click(function() {
    if ($(this).hasClass("current") && $(this).next().queue().length === 0) {
        $(this).next().slideUp();
        $(this).removeClass("current");
    } else if (!$(this).hasClass("current") && $(this).next().queue().length === 0) {
        $(this).next().slideDown();
        $(this).addClass("current");
    }
 });
});

Answer 2

您的fiddle

中未包含 Js 和 Css 文件

的CSS：

http://smartik.ws/downloads/free_demo/scripts/smk_accordion/css/smk-accordion.css

JS：

http://smartik.ws/downloads/free_demo/scripts/smk_accordion/js/smk-accordion.js

Check Updated Demo

你的js代码：

jQuery(document).ready(function ($) {
        $(".accordion_example1").smk_Accordion();
        $(".accordion_example2").smk_Accordion({
            closeAble: true,
        });
        $(".accordion_example3").smk_Accordion({
            showIcon: false,
        });
        $(".accordion_example4").smk_Accordion({
            closeAble: true,
            closeOther: false,
        });
        $(".accordion_example5").smk_Accordion({
            closeAble: true
        });
        $(".accordion_example6").smk_Accordion();
        $(".accordion_example7").smk_Accordion({
            activeIndex: 2
        });
        $(".accordion_example8").smk_Accordion();
    });

Answer 3

您想要多级切换。我想你想要这种答案。

jsfiddle

HTML代码

<div class="container_demo">
        <div class="accordion_example2">

            <!-- Section 1 -->
            <div class="accordion_in">
                <div class="acc_head ">Heading1</div>
                <div class="acc_content">
                    it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 

                       <div class="accordion_example3"> 
                        <div class="accordion_in">
                            <div class="acc_head ">Inner Heading1</div>
                            <div class="acc_content">
                                it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
                            </div>
                        </div>
                           <div class="accordion_in">
                            <div class="acc_head ">Inner Heading2</div>
                            <div class="acc_content">
                                it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
                            </div>
                        </div>
                    </div>



                </div>
            </div>

            <!-- Section 2 -->
            <div class="accordion_in">
                <div class="acc_head" >Heading1</div>
                <div class="acc_content">
                    it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 

                </div>
            </div>

            <!-- Section 3 -->
            <div class="accordion_in">
                <div class="acc_head" >Heading2</div>
                <div class="acc_content">
                    it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
                </div>
            </div>

        </div>
    </div>

jquery代码

jQuery(document).ready(function($){

        $(".accordion_example2").smk_Accordion({
            closeAble: true, 
        });

        $(".accordion_example3").smk_Accordion({

        });

    });

多级嵌套手风琴

3 个答案: