单击另一个div时显示隐藏div。

Question

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

我使用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>

当单击父块(div)时，我需要一些关于如何显示多个div的指导。

我只想显示子元素，目前我尝试使用父div的id作为子元素上的类，当单击父元素时，其他顶级div应该被隐藏，子元素和父元素应该是可见的。

如有任何建议，将不胜感激。

Answer 1

试试这个：

  <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
});