如何通过在 cookie 中保存位置来制作手风琴菜单（包含代码）

Posted 2023-02-19

【中文标题】如何通过在 cookie 中保存位置来制作手风琴菜单（包含代码）

【英文标题】：How to make an accordion menu with saving in cookies the position(code included)

【发布时间】：2012-10-20 06:33:06

【问题描述】：

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'].'"  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'].'" >'.$category['name'].'</a>';
                    
                 else 
                    echo '<a class="category_id category_button" style="cursor:pointer" href="#" title="'.$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'].'" >'.$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="Наволочки" >Наволочки <sup>5</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pledy/" title="Пледы" >Пледы <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="Банные полотенца" >Банные полотенца <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/polotence/kuhonnie_polotenca/" title="Кухонные полотенца" >Кухонные полотенца <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="Покрывала" >Покрывала <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="по цвету" >по цвету <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="беж" >беж <sup>3</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_belyj/" title="белый" >белый <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_blu/" title="блю" >блю <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokrivalo_color_bordovyj/" title="бордовый" >бордовый <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_braun/" title="браун" >браун <sup>5</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_vinograd/" title="виноград" >виноград <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_grafit/" title="графит" >графит <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_grin/" title="грин" >грин <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_ghins/" title="джинс" >джинс <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_kakao/" title="какао" >какао <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_kirpich/" title="кирпич" >кирпич <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_kremovii/" title="крем" >крем <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_lavanda/" title="лаванда" >лаванда <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_lajt/" title="лайт" >лайт <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_malahit/" title="малахит" >малахит <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_med/" title="мёд" >мёд <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_mix/" title="микс" >микс <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_pion/" title="пион" >пион <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_roza/" title="роза" >роза <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_red/" title="рэд" >рэд <sup>6</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_serebro/" title="серебро" >серебро <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_terra/" title="терра" >терра <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_fresh/" title="фреш" >фреш <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_cvetu/pokryvalo_color_chokolad/" title="шоколад" >шоколад <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="по названию" >по названию <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="Аргентина" >Аргентина <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/viola/" title="Виола" >Виола <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/zelenyj_chaj/" title="Зелёный чай" >Зелёный чай <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/irlandia/" title="Ирландия" >Ирландия <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/kantri/" title="Кантри" >Кантри <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/kokos/" title="Кокос" >Кокос <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/lajt/" title="Лайт" >Лайт <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/marsel/" title="Марсель" >Марсель <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/mexsika/" title="Мексика" >Мексика <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/pion/" title="Пион" >Пион <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/radughnoe/" title="Радужное" >Радужное <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/rivera/" title="Ривьера" >Ривьера <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/russkij_folk/" title="Русский Фолк" >Русский Фолк <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/smart/" title="Смарт" >Смарт <sup>2</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/tradicija/" title="Традиция" >Традиция <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/flauers/" title="Флауэрс" >Флауэрс <sup>1</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/fughen/" title="Фьюжен" >Фьюжен <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_nazvaniu/jamajka/" title="Ямайка" >Ямайка <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="по размеру" >по размеру <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" >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" >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" >200x220 <sup>0</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_razmeru/200x240/" title="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" >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" >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="по рисунку" >по рисунку <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="в клетку" >в клетку <sup>3</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_risunku/pokryvala_v_polosku/" title="в полоску" >в полоску <sup>10</sup></a></li><li style="padding-left:12px"><a href="http://training/dom_textile/pokrivala/pokryvala_po_risunku/pokryvala_odnotonnye/" title="однотонные" >однотонные <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="по плотности" >по плотности <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 гр/м" >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 гр/м" >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 гр/м" >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 гр/м" >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="Постельное бельё" >Постельное бельё <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="по плотности ткани" >по плотности ткани <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 гр/м" >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 гр/м" >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 гр/м" >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 гр/м" >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 гр/м" >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 

...还有更多

【问题讨论】：

例如，如果我单击某个类别，img 源也会更改为 +(close) 和 -(opened)...

我只需要一些关于如何在我的代码中实现它的建议，或者如果你愿意的话，一小段代码）

现在我不使用变量 $change - 它只是给你看，因为我不知道怎么做，所以请帮助

【参考方案1】：

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

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