我正在构建一个Web应用程序,我有一个奇怪的问题,我有以下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();
},