Question

我正在修改我们所拥有的一些关系的树视图，我已经设法（帮助）让复选框勾选自己的孩子，但我现在尝试做的是点击每个旁边的加号父母显示相关的子级别。

同样，如果单击减号，则应隐藏子元素。该列表可以包含任意数量的级别。

<ul id="tree">
    <li>
        <a id="sel_11015" class="viewdetails"></a>
        <input type="checkbox" class="11015" id="11015" value="11015" name="list_data[11015]">&nbsp;A New Client
    </li>
    <li>
        <input type="checkbox" class="11015-21810" id="11015-21810" value="21810" name="list_data[11015-21810]">&nbsp;CSL
    </li>
    <li>
        <a name="sel_11015-11017" class="viewdetails"></a>
        <ul>
            <input type="checkbox" class="11015-11017" id="11015-11017" value="11017" name="list_data[11015-11017]">&nbsp;Food Service
            <li>
                <input type="checkbox" class="11015-11017-11021" id="11015-11017-11021" value="11021" name="list_data[11015-11017-11021]">&nbsp;Food Service 
            </li>
            <li>
                <input type="checkbox" class="11015-11017-11023" id="11015-11017-11023" value="11023" name="list_data[11015-11017-11023]">&nbsp;Heff
            </li>
        </ul>
    </li>
    <li>
        <a name="sel_11015-11019" class="viewdetails"></a>
        <ul>
            <input type="checkbox" class="11015-11019" id="11015-11019" value="11019" name="list_data[11015-11019]">&nbsp;Spar
            <li>
                <input type="checkbox" class="11015-11019-11031" id="11015-11019-11031" value="11031" name="list_data[11015-11019-11031]">&nbsp;Access 10
            </li>
            <li>
                <input type="checkbox" class="11015-11019-27192" id="11015-11019-27192" value="27192" name="list_data[11015-11019-27192]">&nbsp;Apex 2
            </li>
            <li>
                <input type="checkbox" class="11015-11019-12719" id="11015-11019-12719" value="12719" name="list_data[11015-11019-12719]">&nbsp;Recycling Centre
            </li>
            <li>
                <a name="sel_11015-11019-11027" class="viewdetails"></a>
                <ul>
                    <input type="checkbox" class="11015-11019-11027" id="11015-11019-11027" value="11027" name="list_data[11015-11019-11027]">&nbsp;Spar Ambient
                    <li>
                        <input type="checkbox" class="11015-11019-11027-11037" id="11015-11019-11027-11037" value="11037" name="list_data[11015-11019-11027-11037]">&nbsp;Spar Ambient Warehouse
                    </li>
                </ul>
            </li>
            <li>
                <input type="checkbox" class="11015-11019-11075" id="11015-11019-11075" value="11075" name="list_data[11015-11019-11075]">&nbsp;Spar Distribution
            </li>
        </ul>
    </li>
</ul>

Answer 1

$('a.viewdetails').click(function() {
  $(this).next('ul').toggle();
});

试试这个。应该适用于任何深度树。我假设'a'标签是优缺点。

在嵌套列表块中显示/隐藏子元素

1 个答案: