当我们单击特定选项卡时，如何隐藏手风琴菜单项中打开的所有选项卡？答案

【问题标题】：How to hide the all the tabs opened in accordion menu item, when we clicked on specific tab?当我们单击特定选项卡时，如何隐藏手风琴菜单项中打开的所有选项卡？
【发布时间】：2015-10-30 18:42:19
【问题描述】：

我有一个要求，当我单击任何选项卡时，它就像手风琴菜单选项卡一样工作，但这里的一个问题是当我单击任何其他选项卡时，打开的选项卡应该只关闭当前选项卡相关的内容应该显示，因为我提到的 html 只是示例，实际上 id 和 div 是动态生成的。为了更好的理解，我也插入图片。

<script	src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
<script>
	$(document).ready(function(){
		

	// Get all the links.
	var link = $("#vy_accordion a");
	

	// On clicking of the links do something.
	link.on('click', function(e) {

	    e.preventDefault();

	    var a = $(this).attr("href");

	    $(a).slideToggle('fast');
	    
	    $(".control-group").css({ 'display' : 'block', 'margin-bottom' : '0' });

	    
	});
	
	});
	
	</script>

#vy_accordion {
	margin-top: 10px;
	border: thin solid #cecece;
	border-top: none;
	border-bottom: none;
}

#vy_accordion div {
	background: white;
	/*height: inherit;
	line-height: inherit;*/
	display: none;
	border-bottom: thin solid #cecece;
	padding-left: 15px;
	min-height: 70px;
}

a.divlink {
	display: block;
	/* width: 483px; */
	background: #f4f4f4;
	background-image: -webkit-linear-gradient(white, #ededed);
	background-image: -moz-linear-gradient(white, #ededed);
	background-image: -o-linear-gradient(white, #ededed);
	background-image: -ms-linear-gradient(white, #ededed);
	background-image: linear-gradient(white, #ededed);
	color: #959696;
	padding-left: 15px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	border-bottom: thin solid #cecece;
	border-top: thin solid #cecece;
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	text-shadow: 0px 1px 1px white;
}

<a class="divlink" href="#Menu-hover-color">Menu-hover-color</a>
<div id="Menu-hover-color" style="display: none;"> 
  <div class="control-group"> 
    <label class="control-label" for="_156_Menu-hover-color"> Menu-hover-color </label> <input class="field" id="_156_Menu-hover-color" name="" type="text" value="#B3E5FC">  
  </div> 
</div>
<a class="divlink" href="#Menu-hover-color">Menu-item-color</a>
<div id="Menu-item-color" style="display: none;"> 
  <div class="control-group"> 
    <label class="control-label" for="_156_Menu-item-color"> Menu-hover-color </label> <input class="field" id="_156_Menu-item-color" name="" type="text" value="#B3E5FC">  
  </div> 
</div>

【问题讨论】：

你可以为你的工作标签创建小提琴吗？
我无法创建小提琴，抱歉所有的 html 都是动态生成的，我已经提供了示例 html 代码。

标签： javascript jquery html css

【解决方案1】：

在您的选项卡中添加类似的类（例如linkTab）并基于此类选择器调用hide()，然后再显示单击/选定的选项卡，如下所示：

HTML：

<a class="divlink" href="#Menu-hover-color">Menu-hover-color</a>
    <div class="linkTab" id="Menu-hover-color" style="display: none;">
...

JS：

var link = $("#vy_accordion a");

// On clicking of the links do something.
link.on('click', function(e) {
    e.preventDefault();

    var a = $(this).attr("href");

    // this line will hide all open tab based on class selector
    $('.linkTab').hide();

    $(a).slideToggle('fast');

    $(".control-group").css({ 'display' : 'block', 'margin-bottom' : '0' });

});

DEMO

【讨论】：