отображение скрытых divs при нажатии другого div

Question

В настоящее время я пытаюсь создать пользовательскую навигацию на домашней странице веб-сайтов, в которой используются плитки для навигации.

Я использую MVCSiteMapProvider для 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> 

мне нужно некоторое руководство о том, как отобразить несколько дивы, когда один из родительских плиток (ДИВ) нажата.

Я только хочу показать дочерние элементы, в настоящее время я пытаюсь сделать это, используя id родительского div как класс на нем дочерних элементов, когда нажимается на родителя, остальные 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 
});