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

Question

I am currently try create a custom navigation on websites homepage that uses tiles for navigation.

I am using MVCSiteMapProvider for MVC5 to display live tiles on the homepage as well as a standard bootstrap navbar, when the user loads the homepage only the main parent navigation any values nested under the parent are hidden.

The CSHTML below is what I have managed to create so far:

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

I need some guidance on how to display multiple divs when one of the parent tiles (div) is clicked.

I only want to show the child elements, currently I am try to do this using the id of the parent div as a class on it child elements, when the parent is clicked the other top level divs should be hidden and the child elements and parent should be visible.

Any advice would be very much appreciated.

Answer 1

Try this:

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