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>

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

jQuery选项卡切换循环

3 个答案: