Функция toggle в списках
На данный момент имеется:
$.each(categories, function(index, category) { var item = $('<li></li>').addClass('mapplic-list-category').attr('data-category', category.id); var ol = $('<ol></ol>').css('border-color', category.color).appendTo(item); if (category.show == 'false') ol.hide(); else item.addClass('mapplic-opened'); var link = $('<a></a>').attr('href', '#').attr('title', category.title).css('background-color', category.color).text(category.title).prependTo(item); link.on('click', function(e) { e.preventDefault(); item.toggleClass('mapplic-opened'); ol.slideToggle(200); }); if (category.icon) $('<img>').attr('src', category.icon).addClass('mapplic-list-thumbnail').prependTo(link); $('<span></span>').text('0').addClass('mapplic-list-count').prependTo(link); list.append(item); }); создает множество списков, и при клике на элемент разворачивает/сворачивает отдельную ветку. нужна помощь в переделке скрипта который будет сворачивать все ветки при развертывании новой. |
$.each(categories, function(index, category) { var item = $('<li></li>').addClass('mapplic-list-category').attr('data-category', category.id); var ol = $('<ol></ol>').css('border-color', category.color).appendTo(item); if (category.show == 'false') ol.hide(); else item.addClass('mapplic-opened'); var link = $('<a></a>').attr('href', '#').attr('title', category.title).css('background-color', category.color).text(category.title).prependTo(item); link.on('click', function(e) { e.preventDefault(); item.addClass('mapplic-opened'); item.each(function(){ if($(this)!= e.target)removeClass('mapplic-opened'); }); ol.slideToggle(200); }); if (category.icon) $('<img>').attr('src', category.icon).addClass('mapplic-list-thumbnail').prependTo(link); $('<span></span>').text('0').addClass('mapplic-list-count').prependTo(link); list.append(item); }); не уверен, но попробуйте |
Pro100Alex,
$.each(categories, function(index, category) { var item = $('<li></li>').addClass('mapplic-list-category').attr('data-category', category.id); var ol = $('<ol></ol>').css('border-color', category.color).appendTo(item); if (category.show == 'false') ol.hide(); else item.addClass('mapplic-opened'); var link = $('<a></a>').attr('href', '#').attr('title', category.title).css('background-color', category.color).text(category.title).prependTo(item); link.on('click', function(e) { e.preventDefault(); $('.mapplic-list-category') .not(item.toggleClass('mapplic-opened')) .removeClass('mapplic-opened').find('ol') .not(ol.slideToggle(200)) .slideUp() }); if (category.icon) $('<img>').attr('src', category.icon).addClass('mapplic-list-thumbnail').prependTo(link); $('<span></span>').text('0').addClass('mapplic-list-count').prependTo(link); list.append(item); }); |
рони ,
Спасибо, ваше решение помогло. Все работает как нужно |
j0hnik, спасибо за помощь в вашем примере меню не разворачивается ни в одном случае. Вышло статичное свернутое меню
|
Часовой пояс GMT +3, время: 08:20. |