单击另一个 div 时显示隐藏的 divs

Question

我目前正在尝试在使用图块进行导航的网站主页上创建自定义导航。

我正在使用 MVC5 的 MVCSiteMapProvider 在主页上显示动态磁贴以及标准 bootstrap 导航栏，当用户加载主页时，只有主父级导航会隐藏嵌套在父级下的任何值。

下面的 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。

我只想显示子元素，目前我尝试使用父元素的 ID div 作为子元素的 class，当父元素被点击时其他顶级 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
});

单击另一个 div 时显示隐藏的 divs

display hidden divs when another div is clicked

javascript

jquery

mvcsitemapprovider

asp.net-mvc-5