单击某些菜单，而其他菜单关闭 [英] 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>

脚本:

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

        }

}

我如何制作一个菜单，在该菜单上单击某些项目，然后将其打开，而其他"OPENED"菜单的<ul>标签将关闭，例如display: none，而且父菜单也不必关闭，只有同级菜单，而不是父菜单，还有父菜单的兄弟菜单，而不是父菜单，我想您了解我的意思在谈论..我真的不知道该怎么做，在它工作不好之前我做了什么...也许是这里的某种递归?但是如何?

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?

有什么想法吗?

更新:

所以现在这里我们有2个功能，可以在cookie中添加或删除已打开/关闭的菜单列表，

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,

例如，在Cookie中，我们保存ID为:100、200、300、250、160的菜单

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

所以我该如何使它循环关闭所有具有该ID的菜单，而不是关闭当前正在单击的当前菜单，而不是其父菜单...

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

推荐答案

您最好搜索Google的一些其他CSS菜单，而不要这么做.但是，鉴于那里的基本HTML(提供了清理后的HTML，您缺少一个结束的li标签或两个li标签)，您可以使用以下代码:

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

脚本[_{已更新，以显示我也如何支持小提琴上的sub标签，请记住，您可以根据需要编辑此代码，有关每个部分的工作原理的更多信息，请参见 jQuery API} ]

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");
    };
});

清洁HTML

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>

这篇关于单击某些菜单，而其他菜单关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！