如何关闭所有用jquery打开的元素?(行为类似于折叠菜单）

How to close all elements that are opened with jquery? (Behavior similar to the accordion menu)

本文关键字：类似于 折叠 菜单 元素 有用 何关闭 jquery      更新时间：2023-09-26

我有这个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级别相同的右侧。所以，我尝试了这个，但没有成功：

$(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')无效，因为没有"显示"属性，您可以简单地使用 伪选择器 :visible 代替.css('display') == 'block'。

您需要显示 css 属性：

if ($(this).css('display') == 'block') {
    $(this).hide();
}

或：

if ($(this).is(':visible')) {
    $(this).hide();
}
相关文章：