Question

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

来源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时，您将获得所有输入＆＃39;你点击的按钮的兄弟姐妹（这是因为你的html结构就是这样）并切换一个类（如果输入有类，toggleClass将删除，否则将添加它）。然后你必须回顾我写的CSS。你可以看到那里

.element_wrapper input.active{
      display: block;
    }

这将使您的按钮在具有活动类时显示。希望你明白了。如果您有任何疑问，请发表评论。

LE：

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

隐藏/显示所有儿童区 - JS

1 个答案: