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

查看：25
本文介绍了jQuery 中的嵌套手风琴菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我想实现以下逻辑:

  • 当我点击1a时，会得到1a的数据和两个子菜单2a,2b

  • 当我点击2a、2b时，我会分别得到各自的数据.

问题

想要的结果:

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

当前结果:

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

JavaScript 代码

$(document).ready(function() {$("#acc1").手风琴({活动:.ui-accordion-left"，始终打开:假，自动高度:假，标题:'a.acc1'，clearStyle: 真});$("#acc2").手风琴({始终打开:假，自动高度:假，标题:'a.acc2'，clearStyle: 真});});

HTML:

    <li><div class="ui-accordion-left"></div><a class="ui-accordion-link acc1">1a<span class="ui-accordion-right"></span></a><div>1a 的数据1a 的数据1a 的数据

<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>2a 的数据2a 的数据2a 的数据

<li><div class="ui-accordion-left"></div><a class="ui-accordion-link acc2">2b<span class="ui-accordion-right"></span></a><div>2b 的数据2b 的数据2b 的数据

<li><div class="ui-accordion-left"></div><a class="ui-accordion-link acc1">1b<span class="ui-accordion-right"></span></a><div>1b br/的数据1b br/的数据dta 1b <br/>

解决方案

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

 $(document).ready(function() {$("#acc1").手风琴({活动:".ui-accordion-left",始终打开:假，自动高度:假，标题:'a.acc1'，clearStyle: 真});$("#acc2").手风琴({活动:".ui-accordion-left",始终打开:假，自动高度:假，标题:'a.acc2'，clearStyle: 真});});<ul id="acc1" class="ui-accordion-container"><li><div class="ui-accordion-left">

<a class="ui-accordion-link acc1">1a<span class="ui-accordion-right"></span></a><div>1a 的数据1a 的数据1a 的数据<ul class="ui-accordion-container" id="acc2"><li><div class="ui-accordion-left">

<a class="ui-accordion-link acc2">2a<span class="ui-accordion-right"></span></a><div>2a 的数据2a 的数据2a 的数据

<li><div class="ui-accordion-left">

<a class="ui-accordion-link acc2">2b<span class="ui-accordion-right"></span></a><div>2b 的数据2b 的数据2b 的数据

<li><div class="ui-accordion-left"></div><a class="ui-accordion-link acc1">1b<span class="ui-accordion-right"></span></a><div>1b br/的数据1b br/的数据dta 1b <br/>

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

I would like to implement the following logic:

The problem

Desired result:

Current result:

JavaScript code

$(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>

解决方案

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆