隱藏/顯示所有子Divs - JS

Question

我想要使用data-id和data-parent屬性值隱藏頁面加載中元素的所有子元素（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; 
    } 

這將使得當他們有活動類的按鈕出現。 希望你明白了。如果您有任何問題，請發表評論。

LE：

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