1

嗨，我正在制作一个导航结构，它的父级在页面加载时可见，而子级则隐藏。我不完全确定我应该怎么做，因为我不熟悉 jQuery。

我尝试使用以下行，但这并不成功：

findChildren.hide();

在我点击折叠按钮之前，任何人都知道如何让孩子们隐藏起来？

我的代码如下或点击查看jsFiddle：

索引.html

<table id="mytable">
<th>Pages</th>
<th>Add</th>
<th>Edit</th>
<th>Remove</th>
    <tr data-depth="0" class="collapse level0">
        <td><span class="toggle collapse"></span>Header Links</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td>Media Library</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>    
        </tr>
    <tr data-depth="1" class="collapse level1">
        <td>SJP TV</td>
         <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td>Funds</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
        <tr data-depth="1" class="collapse level1">
        <td>Calculators</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
        <tr data-depth="1" class="collapse level1">
        <td>Events</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
        <tr data-depth="1" class="collapse level1">
        <td>Links</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>


    <!--Home-->
    <tr data-depth="0" class="collapse level0">
        <td>Home</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>

    <!--About -->
    <tr data-depth="0" class="collapse collapsable level0">
        <td><span class="toggle collapse"></span>About</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
        <!-- Level 2 -->
        <tr data-depth="1" class="collapse level1">
        <td>About Andy Edwards</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>

     <tr data-depth="1" class="collapse level1">
        <td>Testimonials</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
     <tr data-depth="1" class="collapse level1">
        <td>Galleries</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>

    <!--Working with you-->
    <tr data-depth="0" class="collapse collapsable level0">
        <td><!--Span needed for collapse icons--><span class="toggle collapse"></span>Working with You</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>    </tr>
        <!--Level 2-->
        <tr data-depth="1" class="collapse level1">
        <td>Working with other specialists</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
    <!--Our services-->
    <tr data-depth="0" class="collapse collapsable level0">
        <td><!--Span needed for collapse icons--><span class="toggle collapse"></span>Our Services</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td></tr>
        <tr data-depth="1" class="collapse level1">
        <td>Investments</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
        <tr data-depth="1" class="collapse level1">
        <td>Retirement Planning</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
        <tr data-depth="1" class="collapse level1">
        <td>Protecting you and your estate</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>



</table>

js/js.js

// JavaScript Document

$(function() {
    $('#mytable').on('click', '.toggle', function () {
        //Gets all <tr>'s  of greater depth
        //below element in the table
        var findChildren = function (tr) {
            findChildren.hide();
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function () {
                return $(this).data('depth') <= depth;
            }));
        };

        var el = $(this);
        var tr = el.closest('tr'); //Get <tr> parent of toggle button
        var children = findChildren(tr);

        //Remove already collapsed nodes from children so that we don't
        //make them visible. 
        //(Confused? Remove this code and close Item 2, close Item 1 
        //then open Item 1 again, then you will understand)
        var subnodes = children.filter('.expand');
        subnodes.each(function () {
            var subnode = $(this);
            var subnodeChildren = findChildren(subnode);
            children = children.not(subnodeChildren);
        });

        //Change icon and hide/show children
        if (tr.hasClass('collapse')) {
            tr.removeClass('collapse').addClass('expand');
            children.hide();
        } else {
            tr.removeClass('expand').addClass('collapse');
            children.show();
        }
        return children;
    });
});
4

2 回答 2

2

您不能调用findChildren.hide();，因为findChildren它是一个函数，您可以做的是toggle在页面加载时使用 .trigger() 手动触发点击

$(function() {
    $('#mytable').on('click', '.toggle', function () {
        //Gets all <tr>'s  of greater depth
        //below element in the table
        var findChildren = function (tr) {
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function () {
                return $(this).data('depth') <= depth;
            }));
        };

        var el = $(this);
        var tr = el.closest('tr'); //Get <tr> parent of toggle button
        var children = findChildren(tr);

        //Remove already collapsed nodes from children so that we don't
        //make them visible. 
        //(Confused? Remove this code and close Item 2, close Item 1 
        //then open Item 1 again, then you will understand)
        var subnodes = children.filter('.expand');
        subnodes.each(function () {
            var subnode = $(this);
            var subnodeChildren = findChildren(subnode);
            children = children.not(subnodeChildren);
        });

        //Change icon and hide/show children
        if (tr.hasClass('collapse')) {
            tr.removeClass('collapse').addClass('expand');
            children.hide();
        } else {
            tr.removeClass('expand').addClass('collapse');
            children.show();
        }
        return children;
    }).find('.toggle').trigger('click');
});

演示：小提琴

于 2013-09-12T10:09:36.140 回答
0

你不需要你的findChildren功能。您可以nextUntil()在父行之间使用：

var children = tr.nextUntil('.level0');

示例小提琴

于 2013-09-12T10:11:12.177 回答