如何关闭用jquery打开的所有元素？ （行为类似于手风琴菜单）

Question

I have this html code:

<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>

My objective is when i click in a menuFuncionalidades_categoria i close all menuFuncionalidades_content_links that is opened, and opened the right one that is in the same level of the menuFuncionalidades_categoria that i click. So, i try this, but i have no success:

$(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'));
    });
});

What am i missing or doing wrong?

OBS: The behavior that i want, is similar with accordion menu.

DEMO here: http://fiddle.jshell.net/ry9dz/1/

Answer 1

As @karim79 says, you can't check "display" that way - it's a css attribute, not an html attribute.

On the other hand, if you want to close all other entries, then just do that - no need to check if they are visible first! I also suggest you use a more efficient event handler for all your items, instead of binding it to all of them. Using jQuery 1.7, something like this would work:

$(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();
  });
});

Answer 2

You can hide multiple elements without iterating though all of them to see which ones aren't hidden.

Replace;

$("#menu").children().find('.menuFuncionalidades_content_links').each(function () {
  if ($(this).attr('display') == 'block') {
    $(this).hide();
  }
});

with;

$("#menu").find('.menuFuncionalidades_content_links').hide();

$(this).attr('display') is invalid as there are no "display" attribute and instead of using .css('display') == 'block' you could simply use the psuedo selector :visible .

Answer 3

You want the display css property:

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

or:

if ($(this).is(':visible')) {
    $(this).hide();
}