javascript - 识别 Jquery Slider 选项卡上单击选项卡的 ID

Question

我有 2 个外部标签，每个外部标签有 2 个内部标签，这 2 个内部标签有 2 个链接。外部选项卡位于类翻转中，内部选项卡位于类面板中。单击翻转时，面板会展开以显示选项卡的内容。根据我所做的，当我单击任何外部选项卡时，所有外部选项卡都会滑动，并且作为外部选项卡的直接子项的内部选项卡也会滑动，从而显示所有链接。但我想要实现的是，当单击外部选项卡时，只需要滑动它，显示内部选项卡，当单击内部选项卡时，只显示属于被单击的内部选项卡的链接。

HTML:

<div class="flip" id="outer_flip_1">Outer 1
     <div class="panel" id="outer_panel_1">
          <div class="flip" id="link_flip_1"> Panel 1
              <div class="panel" id="link_panel_1"> Link 1 </div>
              <div class="panel" id="link_panel_2"> Link 2 </div>
          </div>
          <div class="flip" id="link_flip_2"> Panel 2
              <div class="panel" id="link_panel_3"> Link 3 </div>
              <div class="panel" id="link_panel_4"> Link 4 </div>
          </div>
     </div>
<div class="flip" id="outer_flip_2">Outer 2
     <div class="panel" id="outer_panel_2">
          <div class="flip" id="link_flip_3"> Panel 3
              <div class="panel" id="link_panel_5"> Link 5 </div>
              <div class="panel" id="link_panel_6"> Link 6 </div>
          </div>
          <div class="flip" id="link_flip_4"> Panel 4
              <div class="panel" id="link_panel_7"> Link 7 </div>
              <div class="panel" id="link_panel_8"> Link 8 </div>
          </div>
     </div>
</div>

Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(evt){
    $(".flip").click(function(evt){
    $(".panel").stop().slideToggle(300);
    });
 });
 </script>

CSS:

   .panel,.flip
   {
       padding:5px;
       text-align:center;
       border:solid 1px #c3c3c3;    
   }
   .flip
   {
    background-color:#e5eecc;
   }
   .panel
   {
      display:none;
      background-color:#fff;
   }

Answer 1

默认情况下，所有选项卡都将不显示，就像在 css 中设置不显示到面板并翻转两者并在给定代码下方应用它将起作用，因为它由当前对象组成。 请尝试下面的js代码

 $(document).ready(function(evt){
    $(".flip").click(function(evt){
    $(this).slideToggle(300);
    });
$(".panel").click(function(evt){
    $(this).slideToggle(300);
    });
});