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

Question

单击选项卡时， Accordion 会隐藏和显示，但不是每次单击都会显示。参见 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 事件。当您添加点击代码的次数为奇数时，您的代码会按预期工作，但当您添加点击代码的次数为偶数时，它将打开/关闭，给人一种什么都没发生的错觉。

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