隐藏/显示所有子Divs - JS

问题描述：

我想要使用data-id和data-parent属性值隐藏页面加载中元素的所有子元素（element_wrapper）。我是新来的JavaScript，所以我不知道该怎么做。只要将它们隐藏在页面载入中，然后我想通过单击按钮来显示/隐藏它们。提前致谢。隐藏/显示所有子Divs - JS

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>

请发表您呈现的HTML，不是你的视图代码。这看起来像剃刀，所以不应该很难做到。 –

@Nathaniel Flick发表评论html – SonOfAGun

'$（'＃wrapper> .element_wrapper'）。hide（）;'？ –

答

我不知道我得到了你的问题所在，但是从我的理解要显示或隐藏点击+/-按钮添加/编辑/删除。

为了隐藏载入的元素，你可以通过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; 
    }

这将使得当他们有活动类的按钮出现。希望你明白了。如果您有任何问题，请发表评论。

LE：

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

隐藏/显示所有子Divs - JS

相关推荐