Как заполнить sidenav бар с дочерними элементами - PullRequest
Новая
       10

Как заполнить sidenav бар с дочерними элементами

0 голосов
/ 19 мая 2019

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

Вот два элемента sidenav. 

<div id="orderList" class="sidenavOrders">
    @foreach (var item in Model)
    {
        <a href="#" onclick="openComponents()">@Html.DisplayFor(modelItem => item.OrderId)</a>
    }
    <a href="javascript:void(0)" class="closebtn" onclick="closeOrders()">&times;</a>
</div>

<div id="componentList" class="sidenavComponents">
    @foreach (var item in Model)
    {
        <a href="#">@Html.DisplayFor(modelItem => item.Components.Count)</a>
    }
    <a href="javascript:void(0)" class="closebtn" onclick="closeComponents()">&times;</a>
</div>

А вот код (для лучшей читаемости убраны функции close): 

<script>
    function openOrders() {
        document.getElementById("orderList").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
        //document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    }

    function openComponents() {
        document.getElementById("componentList").style.width = "250px";
        document.getElementById("main").style.marginLeft = "500px";
        //document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    }
</script>

Я действительно понятия не имею, как я смогу толкать только дочерние элементы («Компоненты») на вторую панель задач. Сейчас все, что я могу сделать, это показать количество компонентов в заказе.

...