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

        }

}

如何制作一个菜单，我单击某个项目并打开它，而其他打开的菜单<ul>标签将关闭，例如display: none，但父菜单也不需要关闭，只有同一级别的菜单，而不是父菜单，还有父母的兄弟菜单，但不是他的父母，我想你明白我在说什么......我真的不知道该怎么做，我在它工作不好之前做了​​什么......也许它在这里有某种递归？但是如何？

有任何想法吗？

更新：

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

例如，在 cookie 中，我们保存 id 为：100、200、300、250、160 的菜单

那么我怎样才能在一个循环中关闭所有具有该 ID 的菜单，而不是我们现在单击的当前菜单，而不是他的父级......

4

2 回答 2

0

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>
于 2012-10-30T16:29:10.320 回答
0

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

于 2012-10-30T16:17:23.217 回答