データ属性によるディビジョンを非表示にして、トグルを作成する（非表示/表示）

Question

私のビューレイアウトにはこのコードがあります。私はjsでルートのものを除いてすべてのdivを隠し、togglerボタンをクリックして要素の子要素を隠してそれらを表示する必要があります。私はそれをどうやって行うのか本当に分かりません。私は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