[英]close the opened accordion menu when second accordion menu is clicked, bootstrap
[英]How to close all elements that are opened with jquery? (Behavior similar to the accordion menu)
我有這個HTML代碼:
<div id="menu">
<ul id="menuFuncionalidades">
<li>
<div class="menuFuncionalidades_categoria">
<a href="/sttenterprise/">Index</a></div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
<a href="#">Cadastros</a></div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul><b>Acesso Usuario</b>
<li><a href="#">Pesquisar</a> </li>
<li><a href="#">Incluir</a> </li>
<li><a href="#">Alterar</a> </li>
<li><a href="#">Consultar</a> </li>
</ul>
<ul><b>Produto</b>
<li><a href="#">Pesquisar</a> </li>
<li><a href="#">Incluir</a> </li>
</ul>
<ul><b>Perfil</b>
<li><a href="#">Pesquisar</a> </li>
<li><a href="#">Incluir</a> </li>
</ul>
</div>
</div>
</li>
<li>
<div class="menuFuncionalidades_categoria">
<a href="#">Coletores</a></div>
<div class="menuFuncionalidades_content_links">
<div class="menuFuncionalidades_content_links_descricao">
<span class="menuFuncionalidades_content_links_descricao_titulo">Descrição</span>
<div class="menuFuncionalidades_content_links_descricao_texto">
Lorem Ipsum...
</div>
</div>
<div class="menuFuncionalidades_content_links_links">
<ul>
<b>Coletor 1</b>
<li><a href="#">Pesquisar</a> </li>
<li><a href="#">Incluir</a> </li>
</ul>
<ul>
<b>Coletor 2</b>
<li><a href="#">Pesquisar</a> </li>
<li><a href="#">Incluir</a> </li>
</ul>
<ul>
<b>Coletor 3</b>
<li><a href="#">Pesquisar</a> </li>
<li><a href="#">Incluir</a> </li>
</ul>
</div>
</div>
</li>
</ul>
</div>
我的目標是當我單擊menuFuncionalidades_categoria
我關閉所有打開的menuFuncionalidades_content_links
,並打開與我單擊的menuFuncionalidades_categoria
處於同一級別的menuFuncionalidades_categoria
。 所以,我試試這個,但我沒有成功:
$(document).ready(function () {
$('#menuFuncionalidades > li > .menuFuncionalidades_categoria').click(function () {
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
// I need a code here to close only the tags that are opened but is not the current
if ($(this).css('display') == 'block') {
$(this).hide();
}
});
$(this).parent().find('.menuFuncionalidades_content_links').slideToggle('normal').css('width', $('#menu').css('width'));
});
});
我想念什么或做錯什么?
OBS:我想要的行為與手風琴菜單類似。
演示在這里: http : //fiddle.jshell.net/ry9dz/1/
正如@ karim79所說,你不能用那種方式檢查“顯示” - 它是一個css屬性,而不是一個html屬性。
另一方面,如果你想關閉所有其他條目,那么就這樣做 - 不需要先檢查它們是否可見! 我還建議您為所有項目使用更有效的事件處理程序,而不是將其綁定到所有項目。 使用jQuery 1.7,這樣的東西可以工作:
$(document).ready(function () {
$("#menuFuncionalidades").on("click", ".menuFuncionalidades_categoria", function(event) {
var selectedMenu = $(event.target).parents("li").find(".menuFuncionalidades_content_links")
, visible = selectedMenu.is(":visible");
// Hide all others
$("#menuFuncionalidades .menuFuncionalidades_content_links").hide();
// Show this one unless it was already visible
if(!visible) {
selectedMenu
.slideToggle('normal')
.css('width', $('#menu').css('width'));
}
// Prevent the default action
event.preventDefault();
});
});
您可以隱藏多個元素,而無需迭代所有元素以查看哪些元素未被隱藏。
更換;
$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
if ($(this).attr('display') == 'block') {
$(this).hide();
}
});
用;
$("#menu").find('.menuFuncionalidades_content_links').hide();
$(this).attr('display')
無效,因為沒有“ display”屬性,您可以僅使用psuedo選擇器:visible
來代替.css('display') == 'block'
。
您需要display css屬性:
if ($(this).css('display') == 'block') {
$(this).hide();
}
要么:
if ($(this).is(':visible')) {
$(this).hide();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.