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

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 函数作为 "active" 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();
});

看看更新后的功能 Fiddle：https://jsfiddle.net/DTcHh/5875/

为什么您的代码不起作用：

基本上，按照您的操作方式，每次单击 li 时都会添加一个 .click 事件。当您添加点击代码的次数为奇数时，您的代码会按预期工作，但当您有偶数次时，它会切换 on/off，给人一种什么都没发生的错觉。

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

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

When clicking on the tabs why not toggle on every click?

html

javascript

css

jquery

twitter-bootstrap-3