php - 如何制作手风琴菜单并在 cookie 中保存位置（包括代码）

Question

PHP：

function renderCategories($parent, $categories, $expand_by_button, $expand_by_text){
    if (count($categories) > 0){
        if (is_expanded($parent)){
            echo '<ul class="main_menu" ' . ($parent ? 'style="padding-left:12px;"' : '') . 'id="category_'.$parent['id'].'">';
        } else {
            echo '<ul style="display:none;' . ($parent ? 'padding-left:12px;"' : '') . '" id="category_'.$parent['id'].'">';
        }
        foreach ($categories as $category){

            if ((count($category['children']) > 0) && ($expand_by_button)){
                echo '<li>';
                if (is_expanded($category)){
                    echo '<img current="1" src="/catalog/view/theme/default/image/btn-collapse.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-'.$category['id'].'">';
                } else {
                    echo '<img current="1" src="/catalog/view/theme/default/image/btn-expand.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-'.$category['id'].'">';
                }
            } else {
                echo '<li style="padding-left:12px">';
            }

            if ($category['is_current']) 
            {
                if($category['thumble'])
                {
                    $image = '<img src="image/'.$category['thumble'].'" />';
                }
                else
                {
                    $image = '';
                }
                echo $image.'<b current="1" class="category_button" id="image-'.$category['id'].'" style="cursor: pointer;">';
            }

            if (count($category['children']) > 0){
                if ($expand_by_text){
                    echo '<a class="category_id" style="cursor:pointer;margin-top:-14px; padding-left:12px; display: inline-block" href="#" title="'.$category['alt'].'" alt="'.$category['alt'].'" id="button-'.$category['id'].'">'.$category['name'].'</a>';
                } else if ($expand_by_button){
                    if ($category['is_current']){
                        echo $category['name'];
                    } else {
                        echo '<a class="category_button" id="button-'.$category['id'].'" href="'.$category['href'].'" title="'.$category['alt'].'" alt="'.$category['alt'].'">'.$category['name'].'</a>';
                    }
                } else {
                    echo '<a class="category_id category_button" style="cursor:pointer" href="#" title="'.$category['alt'].'" alt="'.$category['alt'].'" id="button-'.$category['id'].'">'.$category['name'].'</a>';
                }
            } else {
                if ($category['is_current']){
                    echo $category['name'];
                } else {
                    echo '<a href="'.$category['href'].'" title="'.$category['alt'].'" alt="'.$category['alt'].'">'.$category['name'].'</a>';
                }
            }

            if ($category['is_current']) echo '</b>';

            renderCategories($category, $category['children'], $expand_by_button, $expand_by_text);
            echo '</li>';
        }
        echo '</ul>';
    }

}

HTML：

<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div id="shoputils_category" class="middle"><?php renderCategories(null, $categories, $expand_by_button == 1, $expand_by_text == 1) ?></div>
  </div>
</div>

javascript:

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

        var id = $(this).attr('id').split('-')[1];


        toggleMenu(e,id)

    });

function toggleMenu(e, id)
{

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

}

描述：

现在我有一个菜单，当我点击菜单中的某个类别时，该类别打开，然后保存到 cookies ，如果用户刷新页面，菜单将保存与以前相同的位置，如您所见在javascript中：-我有一个变量$change，该变量指示是否可以一次打开所有菜单类别或一次可以打开一个类别菜单或其称为“手风琴”，如何实现此代码隐藏的可能性当我单击某个类别打开然后将其保存到 cookie 时，所有其他类别，所以这是生成的 html：

正如您所看到的，每个<ul>标签都是一个有 id 的类别，问题是：如何在打开一个类别时隐藏所有其他类别，然后将其保存到 cookie 中，就像上面的代码一样。

<ul class="main_menu" style="padding-left:12px;" id="category_256"><li style="padding-left:12px"><a href="http://training/dom_textile/navolochki/" title="Наволочки" alt="Наволочки">Наволочки <sup>5</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pledy/" title="Пледы" alt="Пледы">Пледы <sup>3</sup></a></li><li><img current="1" src="/catalog/view/theme/default/image/btn-expand.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-257"><b current="1" class="category_button" id="image-257" style="cursor: pointer;">Полотенца <sup>19</sup></b><ul style="display:none;padding-left:12px;" "="" id="category_257"><li style="padding-left:12px"><a href="http://training/dom_textile/polotence/polotence_bannoe/" title="Банные полотенца" alt="Банные полотенца">Банные полотенца <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/polotence/kuhonnie_polotenca/" title="Кухонные полотенца" alt="Кухонные полотенца">Кухонные полотенца <sup>19</sup></a></li></ul></li><li><img current="1" src="/catalog/view/theme/default/image/btn-expand.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-59"><a class="category_button" id="button-59" href="http://training/dom_textile/pokrivala/" title="Покрывала" alt="Покрывала">Покрывала <sup>26</sup></a><ul style="display:none;padding-left:12px;" "="" id="category_59"><li><img current="1" src="/catalog/view/theme/default/image/btn-expand.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-99"><a class="category_button" id="button-99" href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/" title="по цвету" alt="по цвету">по цвету <sup>15</sup></a><ul style="display:none;padding-left:12px;" "="" id="category_99"><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_begh/" title="беж" alt="беж">беж <sup>3</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_belyj/" title="белый" alt="белый">белый <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_blu/" title="блю" alt="блю">блю <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokrivalo_color_bordovyj/" title="бордовый" alt="бордовый">бордовый <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_braun/" title="браун" alt="браун">браун <sup>5</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_vinograd/" title="виноград" alt="виноград">виноград <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_grafit/" title="графит" alt="графит">графит <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_grin/" title="грин" alt="грин">грин <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_ghins/" title="джинс" alt="джинс">джинс <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_kakao/" title="какао" alt="какао">какао <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_kirpich/" title="кирпич" alt="кирпич">кирпич <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_kremovii/" title="крем" alt="крем">крем <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_lavanda/" title="лаванда" alt="лаванда">лаванда <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_lajt/" title="лайт" alt="лайт">лайт <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_malahit/" title="малахит" alt="малахит">малахит <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_med/" title="мёд" alt="мёд">мёд <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_mix/" title="микс" alt="микс">микс <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_pion/" title="пион" alt="пион">пион <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_roza/" title="роза" alt="роза">роза <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_red/" title="рэд" alt="рэд">рэд <sup>6</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_serebro/" title="серебро" alt="серебро">серебро <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_terra/" title="терра" alt="терра">терра <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_fresh/" title="фреш" alt="фреш">фреш <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_chokolad/" title="шоколад" alt="шоколад">шоколад <sup>4</sup></a></li></ul></li><li><img current="1" src="/catalog/view/theme/default/image/btn-expand.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-88"><a class="category_button" id="button-88" href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/" title="по названию" alt="по названию">по названию <sup>26</sup></a><ul style="display:none;padding-left:12px;" "="" id="category_88"><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/argentina/" title="Аргентина" alt="Аргентина">Аргентина <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/viola/" title="Виола" alt="Виола">Виола <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/zelenyj_chaj/" title="Зелёный чай" alt="Зелёный чай">Зелёный чай <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/irlandia/" title="Ирландия" alt="Ирландия">Ирландия <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/kantri/" title="Кантри" alt="Кантри">Кантри <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/kokos/" title="Кокос" alt="Кокос">Кокос <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/lajt/" title="Лайт" alt="Лайт">Лайт <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/marsel/" title="Марсель" alt="Марсель">Марсель <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/mexsika/" title="Мексика" alt="Мексика">Мексика <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/pion/" title="Пион" alt="Пион">Пион <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/radughnoe/" title="Радужное" alt="Радужное">Радужное <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/rivera/" title="Ривьера" alt="Ривьера">Ривьера <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/russkij_folk/" title="Русский Фолк" alt="Русский Фолк">Русский Фолк <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/smart/" title="Смарт" alt="Смарт">Смарт <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/tradicija/" title="Традиция" alt="Традиция">Традиция <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/flauers/" title="Флауэрс" alt="Флауэрс">Флауэрс <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/fughen/" title="Фьюжен" alt="Фьюжен">Фьюжен <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/jamajka/" title="Ямайка" alt="Ямайка">Ямайка <sup>1</sup></a></li></ul></li><li><img current="1" src="/catalog/view/theme/default/image/btn-expand.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-86"><a class="category_button" id="button-86" href="http://training/dom_textile/pokrivala/pokryvala_po_razmeru/" title="по размеру" alt="по размеру">по размеру <sup>26</sup></a><ul style="display:none;padding-left:12px;" "="" id="category_86"><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_razmeru/150x200/" title="150x200" alt="150x200">150x200 <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_razmeru/160%D1%85220/" title="160х220" alt="160х220">160х220 <sup>14</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_razmeru/200x220/" title="200x220" alt="200x220">200x220 <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_razmeru/200x240/" title="200x240" alt="200x240">200x240 <sup>9</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_razmeru/220%D1%85240/" title="220х240" alt="220х240">220х240 <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_razmeru/240%D1%85240/" title="240х240" alt="240х240">240х240 <sup>1</sup></a></li></ul></li><li><img current="1" src="/catalog/view/theme/default/image/btn-expand.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-124"><a class="category_button" id="button-124" href="http://training/dom_textile/pokrivala/pokryvala_po_risunku/" title="по рисунку" alt="по рисунку">по рисунку <sup>26</sup></a><ul style="display:none;padding-left:12px;" "="" id="category_124"><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_risunku/pokryvala_v_kletku/" title="в клетку" alt="в клетку">в клетку <sup>3</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_risunku/pokryvala_v_polosku/" title="в полоску" alt="в полоску">в полоску <sup>10</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_risunku/pokryvala_odnotonnye/" title="однотонные" alt="однотонные">однотонные <sup>13</sup></a></li></ul></li><li><img current="1" src="/catalog/view/theme/default/image/btn-expand.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-87"><a class="category_button" id="button-87" href="http://training/dom_textile/pokrivala/pokryvala_po_plotnosti/" title="по плотности" alt="по плотности">по плотности <sup>26</sup></a><ul style="display:none;padding-left:12px;" "="" id="category_87"><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_plotnosti/270_gr_m/" title="270 гр/м" alt="270 гр/м">270 гр/м <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_plotnosti/340_gr_m/" title="340 гр/м" alt="340 гр/м">340 гр/м <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_plotnosti/350_gr_m/" title="350 гр/м" alt="350 гр/м">350 гр/м <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_plotnosti/370_gr_m/" title="370 гр/м" alt="370 гр/м">370 гр/м <sup>20</sup></a></li></ul></li></ul></li><li><img current="1" src="/catalog/view/theme/default/image/btn-collapse.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-128"><a class="category_button" id="button-128" href="http://training/dom_textile/postel_belio/" title="Постельное бельё" alt="Постельное бельё">Постельное бельё <sup>68</sup></a><ul class="main_menu" style="padding-left:12px;" id="category_128"><li><img current="1" src="/catalog/view/theme/default/image/btn-expand.png" class="category_button" style="cursor:pointer; padding-right:2px;" id="image-136"><a class="category_button" id="button-136" href="http://training/dom_textile/postel_belio/kpb_po_plotn/" title="по плотности ткани" alt="по плотности ткани">по плотности ткани <sup>68</sup></a><ul style="display:none;padding-left:12px;" "="" id="category_136"><li style="padding-left:12px"><a href="http://training/dom_textile/postel_belio/kpb_po_plotn/kpb_po_plotnost_105/" title="105 гр/м" alt="105 гр/м">105 гр/м <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/postel_belio/kpb_po_plotn/kpb_po_plotnost_110/" title="110 гр/м" alt="110 гр/м">110 гр/м <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/postel_belio/kpb_po_plotn/kpb_po_plotnost_115/" title="115 гр/м" alt="115 гр/м">115 гр/м <sup>6</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/postel_belio/kpb_po_plotn/kbp_po_plotn_120/" title="120 гр/м" alt="120 гр/м">120 гр/м <sup>4</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/postel_belio/kpb_po_plotn/kpb_plotn_125/" title="125 гр/м" alt="125 гр/м">125 гр/м <sup>27</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/postel_belio/kpb_po_plotn/kpb_po_plotnost_130/" title="130 

...和更多

Answer 1

尝试将打开的菜单的DOM id保存到cookie中，刷新页面后，检查你的cookie，然后获取上次保存的菜单的DOM id并使用jquery模拟点击调用

$('#id').click();