單擊另一個div時顯示隱藏的div

Question

我目前正在嘗試在使用瓷磚進行導航的網站首頁上創建自定義導航。

我正在使用MCS5的MVCSiteMapProvider在主頁上顯示實時磁貼以及標准的引導導航欄，當用戶加載主頁時，僅隱藏主父導航，嵌套在父下的任何值都將被隱藏。

到目前為止，我已經設法創建了以下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
});