jQuery的选项卡切换循环

Question

我正在寻找的是这样做的更有效的方式是我在这里做的：

$(document).ready(function(){ 
       $('#toggleTwo').click(function(){ 
        $('#one').slideToggle(); 
        $('#two').slideToggle(); 
       }); 
       $('#toggleThree').click(function(){ 
        $('#two').slideToggle(); 
        $('#three').slideToggle(); 
       }); 
      }); 

和HTML是：

<div class="col-md-10" id="toggleTwo"> 
toggle 
</div> 
<div id="two"> 
two 
</div> 

<div class="col-md-10" id="toggleThree"> 
toggle 
</div> 
<div id="three"> 
three 
</div> 

我正在寻找要做的只是简单的;点击一个“选项卡”（它表示切换），并显示“孩子”，其他人需要关闭。我正在考虑一些关于循环或某事的事情，但不确定如何解决问题。我的解决方案有效，但是当我有20个选项卡时，效率并不高。

<div class="col-md-10 toggle box_top" id="toggleOne"> 
         <h4>2. Välj hej</h4> 
         hejsan 

         <div class="childtoggle" style="display:block"> 
          <div class="box1"> 
           <div class="form-group col-sm-12 checkbox2"> 
            <span> 
             <input type="checkbox" id="c1" name="cc"> 
             <label for="c1" class="c1c">Har ännu ingen e-handel</label> 
            </span> 

            <span> 
             Lorem Ipsum 100kr 
            </span> 
           </div> 
           <div class="form-group col-sm-12 checkbox2"> 
            <span> 
             <input type="checkbox" id="c1" name="cc"> 
             <label for="c1" class="c1c">Har ännu ingen e-handel</label> 
            </span> 

            <span> 
             Lorem Ipsum 100kr 
            </span> 
           </div> 
           <div class="form-group col-sm-12 checkbox2"> 
            <span> 
             <input type="checkbox" id="c1" name="cc"> 
             <label for="c1" class="c1c">Har ännu ingen e-handel</label> 
            </span> 

            <span> 
             Lorem Ipsum 100kr 
            </span> 
           </div> 
           <div class="form-group col-sm-12 checkbox2"> 
            <span> 
             <input type="checkbox" id="c1" name="cc"> 
             <label for="c1" class="c1c">Har ännu ingen e-handel</label> 
            </span> 

            <span> 
             Lorem Ipsum 100kr 
            </span> 
           </div> 
           <div class="form-group col-sm-12 checkbox2"> 
            <span> 
             <input type="checkbox" id="c1" name="cc"> 
             <label for="c1" class="c1c">Har ännu ingen e-handel</label> 
            </span> 

            <span> 
             Lorem Ipsum 100kr 
            </span> 
           </div> 
           <div class="col-md-10 box2"> 
            <div class="btn2 btn-primary gonext">Spxara och gå vidare</div> 

            <div class="video"></div> 
            <div class="video-info"> 
             test:<br /> 
             Test, test, test 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div class="col-md-10 toggle box_top" id="toggleTwo"> 
         <h4>2. Välj hej</h4> 
         hejsan 

         <div class="childtoggle"> 
          <div class="box1"> 
           <div class="col-sm-12"> 
            <ul class="nav nav-tabs"> 
              <li class="nav active"><a href="#A" data-toggle="tab">A</a></li> 
              <li class="nav"><a href="#B" data-toggle="tab">B</a></li> 
              <li class="nav"><a href="#C" data-toggle="tab">C</a></li> 
            </ul> 

             <!-- Tab panes --> 
             <div class="tab-content"> 
              <div class="tab-pane fade in active" id="A">Content inside tab A</div> 
              <div class="tab-pane fade" id="B">Content inside tab B</div> 
              <div class="tab-pane fade" id="C">Content inside tab C</div> 
             </div> 
            </div> 
           </div> 
           <div class="col-md-10 box2"> 
            <div class="btn2 btn-primary gonext">Spxara och gå vidare</div> 

            <div class="video"></div> 
            <div class="video-info"> 
             test:<br /> 
             Test, test, test 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 

Answer 1

你可以使用一个类，您的目标的元素和做类似：

$('.myClass').on('click' function() { $(this).slideToggle().siblings('.myClass').slideToggle() }) 

但你的HTML应该像下面这样的结构：

<div class="col-md-10" id="toggleTwo"> 
    toggle 
    <div id="two"> 
     two 
    </div> 
</div> 

Answer 2

你可以试试像这样：

$(".toggle").click(function(){ 
 
$('.childtoggle').not($(this).find(".childtoggle")).hide(500); 
 
$(this).find(".childtoggle").slideToggle(500); 
 
}); 
 

 
$(".childtoggle").click(function(event){ 
 
    event.stopPropagation(); 
 
}); 
 

 
$(".gonext").click(function(e){ 
 
e.stopPropagation(); 
 
if($(this).parent().parent().next(".toggle").html() != undefined) 
 
$(this).parent().parent().next(".toggle").trigger("click"); 
 
else 
 
$(".toggle").first().trigger("click"); 
 

 
});

.childtoggle{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 

 
<div class="col-md-10 toggle" id="toggleTwo"> 
 
toggle 
 
    <div class="childtoggle"> 
 
    one 
 
<button class="gonext"> 
 
Go next 
 
</button> 
 
    </div> 
 
</div> 
 

 
<div class="col-md-10 toggle" id="toggleTwo"> 
 
toggle 
 
    <div class="childtoggle"> 
 
    two 
 
<button class="gonext"> 
 
Go next 
 
</button> 
 
    </div> 
 
</div> 
 

 

 
<div class="col-md-10 toggle" id="toggleThree"> 
 
toggle 
 
    <div class="childtoggle"> 
 
    three 
 
<button class="gonext"> 
 
Go next 
 
</button> 
 
    </div> 
 
</div>

将您的孩子添加到同一个div中，以获得更多的可见性和更好的操作。 之后，你已经有理由隐藏未点击的div并切换点击。这里

Answer 3

@mezt是这个工作代码：http://codepen.io/nitinsuri/pen/yOqMKK

你需要隐藏所有比最初的默认面板中的其他面板。

然后根据班级名称，您需要隐藏可见面板，然后滑动切换所需的面板。

的JavaScript：

$(document).ready(function(){ 
    $(".toggler").click(function(){ 
     $(".toggle-panel:visible").hide(); 
    $("#" + $(this).data('togglePanel') + ".toggle-panel").slideToggle(); 
    }); 
}); 

HTML：

<ul> 
    <li class="col-md-10 toggler" data-toggle-panel="two">toggle 2</li> 
    <li class="col-md-10 toggler" data-toggle-panel="three">toggle 3</li> 
</ul> 

<div id="two" class="toggle-panel">two</div> 
<div id="three" class="toggle-panel" style="display: none">three</div> 

，而不是内嵌样式隐藏面板，可以隐藏在默认情况下所有的面板，然后使用一个类显示默认窗格。