Question

单击选项卡时，手风琴隐藏并显示，但不是每次点击。请参阅fiddle。

<div role="tabpanel" id="tabs-test">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#divTab1" aria-controls="" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#divTab2" aria-controls="" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#divTab3" aria-controls="" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#divTab4" aria-controls="" role="tab" data-toggle="tab">Settings</a></li>
              </ul>
              <!-- Tab panes -->
              <div class="tab-content-outer">
                  <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="divTab1">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                    <div role="tabpanel" class="tab-pane" id="divTab2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    <div role="tabpanel" class="tab-pane" id="divTab3">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    <div role="tabpanel" class="tab-pane" id="divTab4">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>
                  </div>
              </div>
            </div>
            <!-- /tabpanel -->

Answer 1

如果您将$(this).click(function() {移到$(".nav-tabs > li").click(function() {之外，而是使用jQuery .on函数作为“活跃”li，我认为您将获得所需的结果：

// Update: Use a differenet onclick for the active and the
// non-active, and force a .show()
$(".nav-tabs").on('click','li:not(.active)',function() {
    $(NewContent).appendTo($(this));
    $(NewContent).show();
});
$(".nav-tabs").on('click','li.active',function() {
    $(NewContent).toggle();
});

查看更新的，功能性的小提琴：https://jsfiddle.net/DTcHh/5875/

为什么您的代码无效：

基本上，按照您的方式，每次点击.click时，您都会添加li个事件。当你添加了点击代码奇怪的次数你的代码按预期工作，但是当你有一个偶数时，它会打开/关闭，给人一种没有发生任何事情的错觉。

检查此小提琴并打开控制台以更好地理解原则：https://jsfiddle.net/DTcHh/5864/

单击选项卡时，为什么不在每次单击时切换？

1 个答案: