[英]How to hide the all the tabs opened in accordion menu item, when we clicked on specific tab?
I have a requirement that when I clicked on any of tab, it is working like accordion menu tabs, but here one problem is when I clicked on any other tab, the opened tab should be closed only current tab related content should display, as html I mentioned is sample only, actually the id's and div's are dynamically generating. 我有一个要求,当我单击任何选项卡时,它的工作方式就像手风琴菜单选项卡一样,但是这里的一个问题是,当我单击任何其他选项卡时,应该关闭打开的选项卡,而仅显示与选项卡相关的当前内容,如html我提到的仅是示例,实际上id和div是动态生成的。 I am also inserting the picture in order to understand better.
我还要插入图片以便更好地理解。
<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>
Add similar class to your tabs (eg linkTab
) and based on this class-selector call hide()
before showing the clicked / selected tab, as following: 在显示单击/选定的选项卡之前,将类似的类添加到选项卡(例如
linkTab
),并基于此类选择器调用hide()
,如下所示:
HTML: HTML:
<a class="divlink" href="#Menu-hover-color">Menu-hover-color</a>
<div class="linkTab" id="Menu-hover-color" style="display: none;">
...
JS: 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' });
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.