子选项卡不活动

Question

我有两个标签，我用jQuery切换它们。

此代码适用于一个标签，但是当我点击第二个标签时，子标签的onClick无效。

例如：我需要能够点击“panel1”，然后点击“panel4”。

$(function() {
  $('.tab-panels .tabs li').on('click', function() {

    var $panel = $(this).closest('.tab-panels');

    $panel.find('.tabs li.active').removeClass('active');
    $(this).addClass('active');

    //figure out which panel to show
    var panelToShow = $(this).attr('rel');

    //hide current panel
    $panel.find('.panel.active').slideUp(300, showNextPanel);

    //show next panel
    function showNextPanel() {
      $(this).removeClass('active');

      $('#' + panelToShow).slideDown(300, function() {
        $(this).addClass('active');
      });
    }
  });
});

.tab-panels ul {
  margin: 0;
  padding: 0;
}

.tab-panels ul li {
  list-style-type: none;
  display: inline-block;
  background: #999;
  margin: 0;
  padding: 3px 10px;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-weight: 200;
  cursor: pointer;
}

.tab-panels ul li:hover {
  color: #fff;
  background: #666;
}

.tab-panels ul li.active {
  color: #fff;
  background: #666;
}

.tab-panels .panel {
  display: none;
  background: #c9c9c9;
  padding: 30px;
  border-radius: 0 0 10px 10px;
}

.tab-panels .panel.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-panels">
  <ul class="tabs">
    <li rel="panel1" class="active">קריאייטיב סטודיו</li>
    <li rel="panel2">קריאייטיב דיגיטל</li>
  </ul>

  <div id="panel1" class="panel active">
    <ul class="tabs">
      <li rel="panel3" class="active">פרסומות ויראליות</li>
      <li rel="panel4">קריאייטיב לכל</li>
    </ul>
  </div>

  <div id="panel2" class="panel">
    <ul class="tabs2">
      <li rel="panel5" class="active">ניהול רשתות חברתיות</li>
      <li rel="panel6">שיווק גרילה</li>
      <li rel="panel7">דיגיטל</li>
    </ul>
  </div>
</div>