Clicking on some menu while others closing

问题

<ul>
  <li>Menu 1
    <ul>
      <li>submenu 1</li>
      <li>submenu 2
        <ul>
          submenu 3
          <li>submenu 4</li>
        </ul>
      </li>
    </ul> Menu 2
    <ul>
      <li>submenu 1</li>
      <li>submenu 2
        <ul>
          submenu 3
          <li>submenu 4</li>
        </ul>
      </li>
    </ul>
  <li>
</ul>

script:

  if(!Array.indexOf){
        Array.prototype.indexOf = function(obj){
            for(var i=0; i<this.length; i++){
                if(this[i]==obj){
                    return i;
                }
            }
            return -1;
        }
    }
    function categoryAdd(id) {
        var ids = new String($.cookie('expanded')).split(',');
        if (ids.indexOf(id) == -1){
            ids.push(id);
            $.cookie('expanded', ids.join(','), {path: '/'});
        }
    }
    function categoryRemove(id) {
        var ids = new String($.cookie('expanded')).split(',');

        // bug #7654 fixed
        while (ids.indexOf(id) != -1) {
            ids.splice(ids.indexOf(id), 1);
        }
         $.cookie('expanded', ids.join(','), {path: '/'});
    }


    $('.category_button').click(function(e){

        var change = '<?= $change; ?>';
        var current = $(this).attr('current');
        if(change == 'on')
        {

            var ids = new String($.cookie('expanded')).split(',');
            var exceptions = ''
            for(var i = 0; i < ids.length; i++)
            {
                id = ids[i];
                current = $('category_' + ids[i]).attr('current');
                if($('category_' + ids[i]).css('display') != 'none')
                {
                    if(id != $(this).attr('id').split('-')[1] && $(this).parent().parent().attr('id').split('-')[1] == 'undefined')
                    {
                        hideAll(id, '256');
                    }
                }

            }


        }


function hideAll(id, except)
{
    if(id == except){return;}
    var button = $('#image-'+ id);
    button.attr('src', 'catalog/view/theme/default/image/btn-expand.png');
    $('#category_' + id).hide(200);

}

function showMenu(id)
{
    var button = $('#image-'+ id);
    button.attr('src', 'catalog/view/theme/default/image/btn-collapse.png');
$('#category_' + id).show(200);
}

function toggleMenu(e,id, current)
{
        if(current == '1')
        {
            e.preventDefault()
            var button = $('#image-'+ id);
            if ($('#category_'+id).css('display') == 'none'){
                button.attr('src', 'catalog/view/theme/default/image/btn-collapse.png');
                categoryAdd(id);
            } else {
                button.attr('src', 'catalog/view/theme/default/image/btn-expand.png');
                categoryRemove(id);
            }
                $('#category_'+id).toggle(200);
        }
        else
        {

            var button = $('#image-'+ id);
            if ($('#category_'+id).css('display') == 'none'){
                categoryAdd(id);
            } else {
                categoryRemove(id);
            }

        }

}

How can I make a menu where i click on some item and it opens, and others OPENED menu <ul> tags will close e.g. display: none, but also the parent menu need to not to be closed, only the menu in the same level, but not the parent, and also the brother menu of the parent, but not his parent, i think you understand what i am talking about..i really don't have an idea how to do that, what i've made before its working bad...maybe its some kind of recursion here?, but how?

any ideas?

UPDATE:

So now here we have 2 functions that are adding or deleting from the cookies the lists of the menu that has been opened/closed,

for example in the cookies we save menus with id: 100, 200, 300, 250, 160

so how can i make that in a loop closing all the menus with that ids, but not the current menu that we are clicking now, and not his parent...

回答1:

This can be done using a javascript/jquery plugin you will need to just do some googling to find one. You will just need to adjust the plugin according to your specifications.Once you find plugin and try to work with that, then you could come back here if you need help. It shows more effort when you have some solid code to show you have exhausted your talents. Study some of these I think you want an accordion menu if I understand correctly. Jquery

回答2:

You would probably be better off googling some different CSS menus and what not. However given your basic HTML there (provided its cleaned up, your missing a closing li tag or two) you could use the following:

jsFiddle

Script [_{Updated to show how i support the sub tags on the fiddle as well, keep in mind, you can edit this code to do as you please, ffor more information on how each part works, please see jQuery API}]

$("ul > li > ul").hide();

$("ul > li").click(function(e) {
    e.stopPropagation();

    $(this).children().toggle(function(e) {
        if (!$(this).is(":visible")) {
            $(this).find("ul").hide();
            $(this).find("sub").show();
        };
    });

    $(this).siblings().each(function(i) {
        if ($(this).children("ul").length > 0) {
            if ($(this).children("ul").css("display").toLowerCase() == "block") {
                $(this).children().toggle(function(e) {
                    if (!$(this).is(":visible")) {
                        $(this).find("ul").hide();
                        $(this).find("sub").show();
                    };
                });
            }
        }
    });
});

$("ul > li").each(function(i) {
    if ($(this).children("ul").length > 0) {
        $(this).css("cursor", "pointer").prepend($("<sub />").text("[has submenu]"));
    }
    else {
         $(this).css("cursor", "default");
    };
});

Clean HTML

<ul>
    <li>Menu 1
        <ul>
            <li>submenu 1</li>
            <li>submenu 2
                <ul>
                    <li>submenu 3</li>
                    <li>submenu 4</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Menu 2
        <ul>
            <li>submenu 1</li>
            <li>submenu 2
                <ul>
                    <li>submenu 3</li>
                    <li>submenu 4
                        <ul>
                            <li>subsubmenu 1</li>
                            <li>subsubmenu 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    <li>
</ul>

来源：https://stackoverflow.com/questions/13143256/clicking-on-some-menu-while-others-closing