javascript - 隐藏/显示所有子 Div - JS

Question

我想使用 data-id 和 data-parent 属性值在页面加载时隐藏元素的所有子 div (element_wrapper)。我是 javascript 的新手，所以我真的不知道该怎么做。只需在页面加载时隐藏它们，然后我想通过单击按钮来显示/隐藏它们。提前致谢。

源 HTML:

<div id="wrapper">
            <div class="element_wrapper" data-id="1" data-parent="">
            <input class="toggler_btn" type="button" value="+/-" data-id="1" data-parent="">
            Main Office
            <input type="button" value="Add" />
            <input type="button" value="Edit" />
            <input type="button" value="Delete" />
        <div class="element_wrapper" data-id="3" data-parent="1">
            <input class="toggler_btn" type="button" value="+/-" data-id="3" data-parent="1">
            Room 203
            <input type="button" value="Add" />
            <input type="button" value="Edit" />
            <input type="button" value="Delete" />
        <div class="element_wrapper" data-id="6" data-parent="3">
            <input class="toggler_btn" type="button" value="+/-" data-id="6" data-parent="3">
            Table 2
            <input type="button" value="Add" />
            <input type="button" value="Edit" />
            <input type="button" value="Delete" />
        </div>
        </div>
        <div class="element_wrapper" data-id="4" data-parent="1">
            <input class="toggler_btn" type="button" value="+/-" data-id="4" data-parent="1">
            Room 256
            <input type="button" value="Add" />
            <input type="button" value="Edit" />
            <input type="button" value="Delete" />
        <div class="element_wrapper" data-id="7" data-parent="4">
            <input class="toggler_btn" type="button" value="+/-" data-id="7" data-parent="4">
            Table 3
            <input type="button" value="Add" />
            <input type="button" value="Edit" />
            <input type="button" value="Delete" />
        </div>
        </div>
        </div>
        <div class="element_wrapper" data-id="2" data-parent="">
            <input class="toggler_btn" type="button" value="+/-" data-id="2" data-parent="">
            Not So Main Office
            <input type="button" value="Add" />
            <input type="button" value="Edit" />
            <input type="button" value="Delete" />
        <div class="element_wrapper" data-id="5" data-parent="2">
            <input class="toggler_btn" type="button" value="+/-" data-id="5" data-parent="2">
            Room 301
            <input type="button" value="Add" />
            <input type="button" value="Edit" />
            <input type="button" value="Delete" />
        <div class="element_wrapper" data-id="8" data-parent="5">
            <input class="toggler_btn" type="button" value="+/-" data-id="8" data-parent="5">
            Table 13
            <input type="button" value="Add" />
            <input type="button" value="Edit" />
            <input type="button" value="Delete" />
        </div>
        </div>
        </div>

</div>

页面布局代码:

@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="element_wrapper" data-id="@element.ID" data-parent="@element.PARNET_ID">
            <input class="toggler_btn" type="button" value="+/-" 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>

</script>

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

Answer 1

我不确定我是否正确解决了您的问题，但据我了解，您希望通过单击 +/- 按钮来显示或隐藏您的添加/编辑/删除。

为了在加载时隐藏元素，您可以通过 css 实现，但也可以使用 javascript 实现。 这是您需要的 CSS。

.element_wrapper input{
  display: none;
}
.element_wrapper input.toggler_btn{
  display: block;
}
.element_wrapper input.active{
  display: block;
}

这里是按钮的功能:

$(document).ready(function(){
    $(document).on('click','.toggler_btn', function(){
        $(this).siblings('input').toggleClass('active');
    });
})

现在让我们看看它是如何工作的。当你点击 toggler_button 时，你会得到你点击的按钮的所有“输入”兄弟(这是因为你的 html 结构就是这样)并切换一个类(如果输入有类，toggleClass 将删除，否则将添加它)。那你得回头看看我写的css。你可以在那里看到

.element_wrapper input.active{
      display: block;
    }

这将使您的按钮在它们具有事件类时出现。 希望你明白了。如果您有任何问题，请发表评论。

乐:

这里有我的示例:https://jsfiddle.net/jxm2v4bv/1/?utm_source=website&utm_medium=embed&utm_campaign=jxm2v4bv