响应手风琴的标签 - 关闭手风琴

时间:2017-01-25 11:08:08

标签: jquery tabs toggle

我正在使用下面的代码,它是手风琴脚本的响应标签。

此外,我希望能够点击'tab_drawer_heading'来关闭当前的手风琴项目,如果打开(切换)。目前它一直处于打开状态,直到点击另一个。

JSFiddle:https://jsfiddle.net/d02Lu45y/1/

// tabbed content
$(".tab_content").hide();
$(".tab_content:first").show();

/* if in tab mode */
$("ul.tabs li").click(function() {

  $(".tab_content").hide();
  var activeTab = $(this).attr("rel"); 
  $("#"+activeTab).fadeIn();        

  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");

  $(".tab_drawer_heading").removeClass("d_active");
  $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");

});
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {

  $(".tab_content").hide();
  var d_activeTab = $(this).attr("rel"); 
  $("#"+d_activeTab).fadeIn();

  $(".tab_drawer_heading").removeClass("d_active");
  $(this).addClass("d_active");

  $("ul.tabs li").removeClass("active");
  $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});

1 个答案:

答案 0 :(得分:1)

在您的代码中添加以下条件即可。

你应该在显示标签打开之前检查。如果没有那么显示其他wize关闭

if(!$(this).hasClass('d_active')){      
          $("#"+d_activeTab).fadeIn();
}

工作https://jsfiddle.net/d02Lu45y/3/