1
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>
자바 스크립트 :
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);
}
설명 :
지금까지 메뉴가 있는데, ick을 클릭하면 해당 카테고리가 열리고 쿠키에 저장됩니다. 사용자가 페이지를 새로 고침하면 메뉴가 이전과 같은 위치를 저장하므로 자바 스크립트에서 볼 수 있습니다. - 변수가 $change입니다. 이 변수는 메뉴 범주를 모두 한 번에 열 수 있는지 또는 한 번에 하나의 범주 메뉴를 열 수 있는지 또는 해당 아코디언을 호출 할 수 있는지 나타냅니다.이 코드를 구현하면 다른 범주를 숨길 수 있습니다. 카테고리가 열리면 쿠키에 저장되므로 생성 된 html입니다 :
<ul> 태그가 ID를 가진 카테고리라는 것을 알 수 있습니다. 질문은 : 하나를 열 때 다른 카테고리를 숨기려면 어떻게해야합니까? 위의 코드와 같이 쿠키에 저장하십시오.
<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
... 더
예를 들어 어떤 카테고리를 클릭하면 img 소스도 + (닫힘) 및 - (열림)으로 변경됩니다 ... –
내 코드에 구현하는 방법에 대한 조언이 필요하거나 당신은 약간의 코드 조각이 될 것입니다.) –
지금까지 변수 $ change를 사용하지 않았습니다. - 어떻게 만드는지 모르므로 plaese가 도움이됩니다. –