1

因此，我使用 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>

4

1 回答 1

1

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

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

演示

于 2013-08-21T13:11:13.240 回答