多层嵌套手风琴

Multi Level Nested Accordion

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

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

为此，我使用这个插件。

在那个插件中，我没有找到multi level toggle。谁能帮我用这个插件使用多级切换。

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

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

查看JSFiddle链接

也请查看此链接。在这里，他们给出了5个不同的嵌套手风琴演示。

下面的代码显示了多级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");
    }
 });
});

您的文件中没有包含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

检查更新的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();
    });

您需要多级切换。我想你想要这样的答案。

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({
        });
    });
相关文章：