Как вывести текст в каждом списке через jquery?

Question

[Игорь Касперский]

Всем привет. У меня в коде есть список

<ul>
 <li>
  <span class="main">Клик</span>
  <span class="nline">.....</span>
 </li>
 <li>
  <span class="main">Клик</span>
  <span class="nline">.....</span>
 </li>
</ul>

как одной строкой написать в jquery, чтобы поочередно выводилось, т.е. нажал на 2 список текст вылез от 2-го. Найти не могу в инете, там про выборочный выбор). Я сам попробовал, но у меня или все или не один

$('.nline').hide();

	$('.main').on('click', function(i){
		// $(this).addClass('lidown');
		$('.nline').eq(i).slideToggle();
	});

И еще я добавил через list-style: картинку, т.е. открытый список, закрытый список(треугольник) и тоже не могу ни как через jquery

li {
	list-style: url('img/Up.png');
}
.lidown{
	list-style: url('img/down.png');
}

Что делать с 2 проблемами?

Answer 1

[Виталий Инчин ☢]

$('ul').on('click', '.main', function(i){
  $(this).next('.nline').slideToggle();
});

выборочный выбор

Случайные случайности

Comments

[Игорь Касперский]

Выборочный, а что можешь посоветовать насчет list-style? Выше я описал

[Виталий Инчин ☢]

Игорь Касперский: самое оптимальное - по клику туглить класс li,

$(this.parentNode).toggleClass("class1");а в css

ul{
  /*Для закрытых*/
  list-styleL ...;
}

.class1{
  /*Для открытых*/
   list-style: ....;
}

[Игорь Касперский]

Виталий Инчин ☢: И еще https://jsfiddle.net/nxzhn47x/1/ все по твоему коду, а почему li показывает только 1-й тег, когда я добавляю в тот же li еще ,, пусто, кроме 1-го?

[Виталий Инчин ☢]

Игорь Касперский: тогда используй не next, a nextAll

[Игорь Касперский]

Виталий Инчин ☢: это победа, ура, хоть и маленькая победа, но все же) спасибо