Question

我的视图布局已经有了这个代码。我需要隐藏除了js中的根目录之外的所有div，并让toggler按钮工作onclick以隐藏元素的子节点并显示它们。我真的不确定该怎么做。我是JS的新手。感谢。

    @model List<Tree_List.Controllers.Element>
@{
    ViewBag.Title = "Index";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

@helper PopulateDivs(List<Tree_List.Controllers.Element> elements)
        {
foreach (var element in elements)
{
        <div class="toggler_wrapper">
            <input class="toggler_btn" type="button" value="+/-"/ data-id="@element.ID" data-parent="@element.PARNET_ID">
        </div>
        <div class="element_wrapper" data-id="@element.ID" data-parent="@element.PARNET_ID">
            @element.NAME
            <input type="button" value="Add" />
            <input type="button" value="Edit" />
            <input type="button" value="Delete" />
            @if (element.CHILDS.Count() > 0)
            {
                @PopulateDivs(element.CHILDS);
            }
        </div>
}
}

<script>
    $(document).ready(function init() {

    });
</script>

<div id="wrapper">
    @PopulateDivs(Model)
</div>

Answer 1

$('#wrapper').on('click', '.toggler_btn', function() {

    // Hide all element_wrapper elements
    $('div.element_wrapper').hide();

    // Show the nearest one - this is the 'except the first one' bit
    $(this).parent('.toggler_wrapper').next('div.element_wrapper').show();
});

请参阅此JSFiddle

按数据属性隐藏Div，并使Togglers工作（隐藏/显示）

1 个答案: