对手风琴的响应标签 - 在手风琴上切换关闭

Question

我正在使用下面的代码，它是手风琴脚本的响应选项卡。

此外，如果打开（切换），我希望能够单击 '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");
});

Answer 1

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

您应该在显示选项卡是否打开之前进行检查。如果没有，则显示其他 wize close

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

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

对手风琴的响应标签 - 在手风琴上切换关闭

Responsive Tabs to accordion - Toggle close on accordion

jquery

tabs

toggle