单击选项卡时,手风琴处于隐藏和显示状态,但并非每次单击都显示。请参见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 -->
最佳答案
如果将$(this).click(function() {
移到$(".nav-tabs > li").click(function() {
之外,而将jQuery .on
函数用于“活动”锂,我想您将获得所需的结果:
// 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/