按数据属性隐藏Div并使Togglers起作用（隐藏/显示）

问题描述：

我已经得到了我的视图布局的代码。我需要隐藏除js根目录以外的所有div，并使按钮工具onclick隐藏某个元素的子元素并显示它们。我不确定如何做到这一点。我对JS很新颖。谢谢。按数据属性隐藏Div并使Togglers起作用（隐藏/显示）

@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>

你很可能会得到更多的答案，如果你张贴的HTML输出，而不是C＃代码查看右键 –

单击输出页。去查看页面源代码。在这里发布生成的html代码。这会让我们更深入地了解Yu想要完成什么 –

除了root'div'之外，你是什么意思？根div是'wrapper'，所以你的意思是你想隐藏并显示'element_wrapper'？ – Luke

答

$('#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

按数据属性隐藏Div并使Togglers起作用（隐藏/显示）

相关推荐