如何识别 jquery 移动扩展列表的当前深度级别？答案

【问题标题】：How can I identify the current depth level of a jquery mobile expanded list?如何识别 jquery 移动扩展列表的当前深度级别？
【发布时间】：2013-08-20 17:45:59
【问题描述】：

所以我用 jquery mobile 创建了一些可折叠的嵌套列表。我有“全部折叠”和“全部展开”的工作按钮。我还需要只影响当前最深层次的“折叠一些”和“展开一些”按钮。单击这两个按钮之一时，应运行一个循环，将current_depth 变量设置为最深的展开级别。我正在尝试找到一种方法来识别当前关卡深度，以便我可以在该关卡上使用内置的“折叠”或“展开”命令。通常我会使用 for 循环来执行此操作，就像我为 max_depth 所做的那样，但我不知道要检查哪个标识符来查看关卡是打开还是关闭。有谁知道 jquery mobile 添加到展开或折叠列表中的标识符是什么？我的第一直觉是data-collapsed="true" 属性……但我不确定。功能方面，我写的所有东西都有效，我只需要某种标识符来区分 jquery mobile 中的展开和折叠元素。这是我到目前为止的代码。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Table of Contents</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    </meta>    
<script>
    $(document).ready(function() {
        //Variable to track depth and find max depth
        var current_depth=1;
        var max_depth
        for(i=1;i<=10;i++) {
         if($('ul').hasClass('depth-'+i))
         {
             max_depth = i;
         }
        };

        //Button to expand all links
        $('#openAll').click(function () {
            $('.expandable').trigger('expand');
            current_depth=max_depth;
            alert(max_depth);
        });
        //Button to close all links
        $('#closeAll').click(function () {
            $('.expandable').trigger('collapse');
        });
        //Button to expand current level
        //This Code likely has errors, I'm trying to find a way to identify the current level
        $('#openSome').click(function() {
           for(i=1;i<=10;i++){  
            if($('ul.depth-'+i+'[data-collapsed="true"]').length() !== 0) 
            {
             current_depth=i;
            }
           };
            $('.depth-'+current_depth).trigger('expand');
            alert(current_depth);
        });
        //Button to collapse current level
        $('#closeSome').click(function() {
            $('.depth-'+current_depth).trigger('collapse');
        });
    });
</script>
</head> 
<body> 
    <!--Define global click butons-->
    <button data-role="button" id="openAll"> Expand All</button>
    <button data-role="button" id="openSome"> Expand Some</button>
    <button data-role="button" id="closeAll"> Collapse All</button>
    <button data-role="button" id="closeSome"> Collapse Some</button>


    <!-- Create Sample Link Structure -->
    <div data-role="collapsible" data-theme="b" class="expandable depth-1">
        <h3>Chapter 1</h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
            <h3> Section 1 </h3>
            I'm the collapsible set content for section 1.
        </ul>
    </div>

    <div data-role="collapsible" data-theme="b" class="expandable depth-1">
        <h3>Chapter 2</h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
            <h3> Section 1 </h3>
            I'm the collapsible set content for section 1.
        </ul>
    </div>    
</body>

【问题讨论】：

这是您要找的吗？ jsfiddle.net/Palestinian/VXHzH
.ui-collapsible-collapsed 类被添加到折叠元素中，您可以将其用作我上面演示中的标识符。
它似乎在正确的轨道上。我没有意识到这是一个添加的类。这是一个巨大的帮助，谢谢！
知道为什么这不适用于最高级别吗？
@Omar ji 请将此作为答案。以后可能会对其他人有所帮助。

标签： jquery html jquery-mobile expandablelistview

【解决方案1】：

jQuery Mobile 为折叠的 div 添加.ui-collapsible-collapsed，用它来识别 div 是否折叠。

请注意，父可折叠是 div，子可折叠是 ul。使用 div [data-role=collapsible] 和 ul [data-role=collapsible] 选择器来访问它们。

Demo

【讨论】：