jsFiddle

Question

<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，而且父菜单也不需要关闭，只有相同级别的菜单，但不是父级，也是父级的兄弟菜单，但不是他的父母，我想你明白什么我正在谈论......我真的不知道该怎么做，我在它工作不好之前做了什么......也许它在这里有某种递归？但是怎么样？

任何想法？

更新：

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

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

那么如何在循环中关闭所有带有id的菜单，而不是我们现在点击的当前菜单，而不是他的父...

Answer 1

这可以使用javascript / jquery插件完成，你需要做一些谷歌搜索才能找到一个。您只需要根据您的规格调整插件。一旦找到插件并尝试使用它，那么如果您需要帮助，您可以回到这里。当你有一些可靠的代码来证明你已经耗尽了你的才能时，它会显示出更多的努力。研究其中的一些，如果我理解正确，我想你想要一个手风琴菜单。 Jquery

Answer 2

你可能最好用谷歌搜索一些不同的CSS菜单，什么不是。但是，鉴于您的基本HTML（如果已清理，您缺少一个或两个关闭的li标签），您可以使用以下内容：

jsFiddle

脚本[_{更新以显示我如何支持小提琴上的子标记，请记住，您可以编辑此代码以便随意执行，有关每个部分如何工作的更多信息，请参阅{ {3}}}

$("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

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

在其他菜单关闭时单击某个菜单

2 个答案:

jsFiddle