Показать / скрыть дочерние элементы в блоке вложенного списка

Question

Я изменяю древовидное представление некоторых наших отношений, мне удалось (с помощью) установить флажок, помечающий его дочерние элементы, но сейчас я пытаюсь сделать это, нажав на плюс рядом с каждымparent отображает соответствующие дочерние уровни.

Аналогичным образом, если щелкнуть минус, он должен скрыть дочерние элементы.Список может содержать любое количество уровней.

<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' - это плюсы или минусы.