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 to panel中的set display none和翻转两者并在给定代码下面应用它将起作用，因为它由当前对象组成。请尝试以下js代码

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

在Jquery Slider选项卡上标识单击选项卡的ID

1 个答案: