单击选项卡时如何显示所有div及其嵌套div？

Question

我正在创建动态内容，因此当用户点击侧边栏选项时，内容会发生变化。我只使用标题测试它，它工作。当我添加更多div时，div不会显示，但是当Inspect它时，所有div都有'display：none'。

我在这里创建了一个示例：https://jsfiddle.net/Gereltuya/axdc3tv4/

这是html：

<a class="link-purple" id="summary-id" name="summary-id" href="javascript:void(0);"><i class="fa fa-list-alt"></i>Summary</a>
            <a id="cascade-rules-link-id" name="cascade-rules-link-id" class="link-blue" href="javascript:void(0);"><i class="fa fa-cubes"></i>Cascade Rules</a>
            <a id="link-rules-link-id" name="link-rules-link-id" class="link-red" href="javascript:void(0);"><i class="fa fa-link"></i>Link Rules</a>
            <a name="calculated-rules-link-id" class="link-yellow" href="javascript:void(0);"><i class="fa fa-calculator"></i>Calculated Rules</a>
            <a name="ratetype-rules-link-id" class="link-green" href="javascript:void(0);"><i class="fa fa-line-chart"></i>Rate Type Rules</a>




<div class="main-content">

  <div class="main">
       <div id="summary-id"><h2 class="header">Summary What</h2> </div> <!--Summary-->

       <div id="link-rules-link-id">

因此，此部分下方的所有内容都包含 display：none ，但只显示标题。

        <h2 class="header">Link Rules whut</h2> 
      <div class="collapse-group">
        <div class="controls">
    <button class="btn btn-primary open-button" type="button">
      Open all
    </button>
    <button class="btn btn-primary close-button" type="button">
      Close all
    </button>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="trigger collapsed">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi molestiae dolorum, soluta temporibus vero perferendis quo odit eaque cum fugiat nihil earum error vitae libero nostrum sed ipsam, beatae ea.
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="trigger collapsed">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Sunt quia aperiam, officiis tempora quis quasi fugit ab ipsa quo expedita reiciendis quod iusto! Enim delectus unde voluptatem officiis molestiae repudiandae.
      </div>
    </div>
  </div>
</div>



      </div> <!--Link Rules-->
            <div id="cascade-rules-link-id"><h2 class="header">Cascade Rules</h2> </div>
      <div id="calculated-rules-link-id"><h2 class="header">Calculated Rules</h2> </div>
      <div id="ratetype-rules-link-id"><h2 class="header">Rate Type Rules</h2> </div>

    </div>

</div>

我认为我的javascript有问题，特别是当它执行fadeIn（）但我不知道如何将嵌套的div定位到fadeIn（）？如何让它们可见？

$(".main div").hide();

       $("div.slidebar a:first").addClass("selected");
       $('.main div:first').fadeIn();


       $("div.slidebar a").on('click',function(e){

           e.preventDefault();

           if($(this).attr("class")=="selected")
               {

                   return
                   alert("work");
               } else
                   {
                       $(".main div").hide();
                       $("div.slidebar a").removeClass("selected");
                       $(this).addClass("selected");
                       $("div#"+$(this).attr("name")).fadeIn();

                   }
       })