Функция toggle в списках

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

создает множество списков, и при клике на элемент разворачивает/сворачивает отдельную ветку. нужна помощь в переделке скрипта который будет сворачивать все ветки при развертывании новой.

[j0hnik]

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

[Pro100Alex]

рони ,

Спасибо, ваше решение помогло. Все работает как нужно

[Pro100Alex]

j0hnik, спасибо за помощь в вашем примере меню не разворачивается ни в одном случае. Вышло статичное свернутое меню