我现在正在构建一个网络应用程序,我有一个奇怪的问题,我有以下 HTML,
它有类似于这种格式的代码,
<article class="item">
<header class="active">
</header>
<div class="item_content">
<div class="item-tabs">
<ul>
<li><a href="#" class="tab-link">Description</a><li>
<li><a href="#" class="tab-link">Tasks</a></li> <!-- THERE IS A CLICK EVENT ON THIS -->
</ul>
<div class="tab-content item-description">Description</div>
<div class="tab-content item-tasks">Tasks</div>
</div>
<article class="item">
<header class="active">
</header>
<div class="item_content">
<div class="item-tabs">
<ul>
<li><a href="#" class="tab-link">Description</a><li>
<li><a href="#" class="tab-link">Tasks</a></li> <!-- THERE IS A CLICK EVENT ON THIS -->
</ul>
<div class="tab-content item-description">Description</div>
<div class="tab-content item-tasks">Tasks</div>
</div>
</div>
</article>
</article>
第一个class="tab-link"
触发下面的 javascript 一次,但第二个 `class="tab-link" 触发下面的 javascript 两次。这有什么原因吗?
itemTab: function(e) {
var clicked = $(e.currentTarget),
clickedTab = clicked.data("tab");
if(clicked.closest(".item-tabs").find("." + clickedTab).css("display") == "block")
{
clicked.closest(".item-tabs").find(".tab-content.active").slideUp(500, function(){
clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
});
clicked.closest(".item-tabs").find(".close").css("visibility", "hidden");
clicked.closest(".item-tabs").find("li.active").removeClass("active");
}
else
{
clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active");
clicked.parent().addClass("active");
clicked.closest(".item-tabs").find("." + clickedTab).addClass("active");
clicked.closest(".item-tabs").find(".close").css("visibility", "visible");
}
e.preventDefault();
//stop();
},