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

        }

}

いくつかのアイテムをクリックして開き、他のOPENEDメニュー<ul>タグが閉じるメニューを作成するにはどうすればよいですかdisplay: none.また、親の兄弟メニューですが、彼の親ではありません。私が話していることを理解していると思います..私は本当にそれを行う方法がわかりません。たぶん、ここである種の再帰ですか?, しかし、どのように?

何か案は？

アップデート：

ここでは、開いた/閉じたメニューのリストを Cookie に追加または削除する 2 つの関数があります。

たとえば、Cookie では、100、200、300、250、160 の ID でメニューを保存します。

では、そのIDを持つすべてのメニューを閉じるループでそれを作成するにはどうすればよいですか。ただし、現在クリックしている現在のメニューではなく、彼の親ではありません...

4

2 に答える 2

0

おそらく、いくつかの異なるCSSメニューをグーグルで検索したほうがよいでしょう。ただし、そこに基本的なHTMLがある場合（クリーンアップされている場合、終了liタグが1つか2つ欠落している場合）、次を使用できます。

jsFiddle

スクリプト[フィドルのサブタグもサポートする方法を示すように更新されました。このコードを編集して自由に実行できます。各部分の動作の詳細については、jQueryAPIを参照してください]

$("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>
于 2012-10-30T16:29:10.320 に答える
0

これは、javascript/jquery プラグインを使用して実行できます。プラグインを見つけるには、グーグルで検索するだけです。仕様に従ってプラグインを調整する必要があります。プラグインを見つけてそれを操作しようとしたら、ヘルプが必要な場合はここに戻ることができます。自分の才能を使い果たしたことを示すしっかりしたコードがあると、より多くの努力が示されます。これらのいくつかを勉強してください。私が正しく理解できれば、アコーディオン メニューが必要になると思います。Jクエリ

于 2012-10-30T16:17:23.217 に答える