Javascript 单击其他div时显示隐藏的div

我目前正在尝试在网站主页上创建一个自定义导航，使用瓷砖进行导航

我使用MVCSiteMapProvider for MVC5在主页上显示实时互动程序以及标准引导导航栏，当用户加载主页时，只有主父导航项下嵌套的任何值都是隐藏的

以下CSHTML是我迄今为止成功创建的内容：

 <section id="content">
    <div class="main-content">
        @{
            var nodes = MvcSiteMapProvider.SiteMaps.Current.CurrentNode;
        }

        @foreach (var node in nodes.RootNode.ChildNodes)
        {
            <div class="col-md-4 live-tile" id="@node.Key">
                <div class="@node.Description">
                    <h3>@node.Title</h3>
                </div>
            </div>

            foreach (var childNode in node.ChildNodes)
            {
                <div class="col-md-4 hidden @childNode.ParentNode.Key">
                    <div class="@childNode.Description">
                        <h3>@childNode.Title</h3>
                    </div>
                </div>
            }
        }
    </div>
</section>

  <script type="text/javascript">
    $('.live-tile').on('click', function () {
        var ids = $('.live-tile').map(function () {
            return this.id;
        }).get();
        $.each(ids, function (index, value) {
        });
    });
</script>

@{
var nodes=mvcsitemprovider.SiteMaps.Current.CurrentNode；
}
@foreach（nodes.RootNode.ChildNodes中的var节点）
{
@节点名称
foreach（node.ChildNodes中的var childNode）
{
@childNode.Title
}
}
$（'.live tile'）。在（'click'，函数（）{
var id=$（'.live tile'）.map（函数（）{
返回此.id；
}).get（）；
$.each（ID、函数（索引、值）{
});
});

我需要一些关于如何在单击一个父tile（div）时显示多个div的指导

我只想显示子元素，目前我正在尝试使用父div的id作为子元素上的类来执行此操作，当单击父元素时，其他顶级div应隐藏，并且子元素和父元素应可见

任何建议都将不胜感激。

试试以下方法：

---

嗨，Luke，这禁用了所有div，但似乎没有显示隐藏的div，有什么想法吗？很抱歉，很麻烦，但是关于如何修改jquery的想法，以便除了单击的div之外的所有div都是隐藏的，并且只显示其类中具有父id的隐藏div

  <div class="col-md-4 live-tile" id="@node.Key">
    <div class="@node.Description">
      <h3>@node.Title</h3>
    </div>
  </div>

  <div class="col-md-4 hidden @childNode.ParentNode.Key">
    <div class="@childNode.Description">
      <h3>@childNode.Title</h3>
    </div>
  </div>

  <div class="col-md-4 hidden @childNode.ParentNode.Key">
    <div class="@childNode.Description">
      <h3>@childNode.Title</h3>
    </div>
  </div>

  <div class="col-md-4 hidden @childNode.ParentNode.Key">
    <div class="@childNode.Description">
      <h3>@childNode.Title</h3>
    </div>
  </div>



  <div class="col-md-4 live-tile" id="@node.Key">
    <div class="@node.Description">
      <h3>@node.Title</h3>
    </div>
  </div>

  <div class="col-md-4 hidden @childNode.ParentNode.Key">
    <div class="@childNode.Description">
      <h3>@childNode.Title</h3>
    </div>
  </div>

  <div class="col-md-4 hidden @childNode.ParentNode.Key">
    <div class="@childNode.Description">
      <h3>@childNode.Title</h3>
    </div>
  </div>

  <div class="col-md-4 hidden @childNode.ParentNode.Key">
    <div class="@childNode.Description">
      <h3>@childNode.Title</h3>
    </div>
  </div>


</div>

$('.live-tile').on('click', function () {
  $('.main-content>div').not('.live-tile').addClass('hidden');// hide all divs on click
  $('.main-content>div').removeClass('clicked');
  $(this).addClass('clicked');
  $('.clicked').nextUntil( '.live-tile', "div.hidden" ).removeClass('hidden');// now show the next hidden ones
});