jQuery中的嵌套手风琴菜单 [英] Nested accordion menu in jQuery

问题描述

我有一个菜单，使用一组嵌套的手风琴1和2来实现，每个嵌套的手风琴都带有元素a和b.

I have a menu implemented using a set of nested accordions, 1 and 2, each with elements, a and b.

我想实现以下逻辑:

• 单击1a时，将获得1a的数据和两个子菜单2a，2b

• When I click 1a, I will get the data of 1a and two submenu 2a,2b

当我单击2a，2b时，我将分别获取每个数据.

When I click 2a, 2b I will get the data of each, respectively.

问题

所需结果:

• 我只想显示最后一次点击的nth-most子元素，折叠所有其他元素.
• 初始化后，只有1a和1b应该可见.

• I only want to display the nth-most child element for the last click, collapsing all others.
• Upon initialization, only 1a and 1b should be visible.

当前结果:

• 点击1b，然后再点击2b，1b仍然完全可见.

• Clicking on 1b, then on 2b, 1b is still fully visible.

$(document).ready(function() {
    $("#acc1").accordion({
        active:".ui-accordion-left",
        alwaysOpen: false,
        autoheight: false,
        header: 'a.acc1',
        clearStyle: true
    });
    $("#acc2").accordion({
        alwaysOpen: false,
        autoheight: false,
        header: 'a.acc2',
        clearStyle: true
    });
});

HTML:

<ul id="acc1" class="ui-accordion-container">
    <li>
        <div class="ui-accordion-left"></div>
        <a class="ui-accordion-link acc1">1a
            <span class="ui-accordion-right"></span>
        </a>
        <div>
            data of 1a<br/>
            data of 1a<br/>
            data of 1a<br/>
        </div>
        <div>
            <ul class="ui-accordion-container" id="acc2">
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc2">2a
                        <span class="ui-accordion-right"></span>
                    </a>
                    <div>
                        data of 2a<br/>
                        data of 2a<br/>
                        data of 2a<br/>
                    </div>
                </li>
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc2">2b
                        <span class="ui-accordion-right"></span>
                    </a>
                    <div>
                        data of 2b<br/>
                        data of 2b<br/>
                        data of 2b<br/>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="ui-accordion-left"></div>
        <a class="ui-accordion-link acc1">1b
            <span class="ui-accordion-right"></span>
        </a>
        <div>
            data of 1b<br />
            data of 1b<br />
            dta of 1b <br />
        </div>
    </li>
</ul>

推荐答案

只需更改HTML中元素的顺序，即可获得所需的行为.现在开始时仅打开1a和1b.同样，当您单击1b时，它将关闭1a，这也将隐藏所有打开的2a/2b部分.

Just a few changes to the order of the elements in your HTML and you get the behavior you are looking for. At the start now only 1a and 1b are open. Similarly when you click on 1b now it will close 1a which will hide any open 2a/2b section as well.

    $(document).ready(function() {
        $("#acc1").accordion({
            active:".ui-accordion-left",
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc1',
            clearStyle: true
        });
        $("#acc2").accordion({
            active:".ui-accordion-left",
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc2',
            clearStyle: true
        });
    });

    <ul id="acc1" class="ui-accordion-container">
        <li>
            <div class="ui-accordion-left">
            </div>
            <a class="ui-accordion-link acc1">1a
                <span class="ui-accordion-right"></span>
            </a>
            <div>
                data of 1a<br/>
                data of 1a<br/>
                data of 1a<br/>
                <ul class="ui-accordion-container" id="acc2">
                    <li>
                        <div class="ui-accordion-left">
                        </div>
                        <a class="ui-accordion-link acc2">2a
                            <span class="ui-accordion-right"></span>
                        </a>
                        <div>
                            data of 2a<br/>
                            data of 2a<br/>
                            data of 2a<br/>
                        </div>
                    </li>
                    <li>
                        <div class="ui-accordion-left">
                        </div>
                        <a class="ui-accordion-link acc2">2b
                        <span class="ui-accordion-right"></span></a>
                        <div>
                            data of 2b<br/>
                            data of 2b<br/>
                            data of 2b<br/>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div class="ui-accordion-left"></div>
            <a class="ui-accordion-link acc1">1b
            <span class="ui-accordion-right"></span></a>
            <div>
                data of 1b<br />
                data of 1b<br />
                dta of 1b <br />
            </div>
        </li>
    </ul>
</body>

这篇关于jQuery中的嵌套手风琴菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！