Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Функция toggle в списках (https://javascript.ru/forum/events/72708-funkciya-toggle-v-spiskakh.html)

Pro100Alex 20.02.2018 19:40

Функция 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);
});


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

j0hnik 20.02.2018 20:48

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


не уверен, но попробуйте

рони 20.02.2018 20:52

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 21.02.2018 07:14

рони ,

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

Pro100Alex 21.02.2018 07:17

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


Часовой пояс GMT +3, время: 06:30.