Question

所以我用jquery mobile创建了一些可折叠的嵌套列表。我有“全部崩溃”和“全部展开”的工作按钮。我还需要按钮“折叠一些”和“扩展一些”，只影响当前最深层次。单击这两个按钮之一时，应运行一个循环，将current_depth变量设置为最深的扩展级别。我正在尝试找到一种方法来识别当前的级别深度，以便我可以在该级别上使用内置的“collapse”或“expand”命令。通常我会使用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>

Answer 1

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

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

<强> Demo

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

1 个答案: