Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Событие и вложенный список (https://javascript.ru/forum/jquery/83160-sobytie-i-vlozhennyjj-spisok.html)

win32s 04.10.2021 15:27

Событие и вложенный список
 
Пишу код обработки вложенного списка, почему-то клик срабатывает не только на категории, а и на элементы (хотя не должно вроде).

Т.е. если нажать на категорию РНР, то она сворачивается (книжки по РНР), но - если нажать на элемент списка (php book..), то категория тоже сворачивается. Неясно почему, т.к. клик назначен на li.subcat, а там просто LI..
<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book index</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
console.log("jquery working");

$("li.subcat").on("click",function(event) 
		{
		$(this).children("ul").toggle();

		event.stopPropagation();
		});
		
$("a.item0").click( function () { event.stopPropagation();})
});
</script>
</head><body>
<ol>
<li class="subcat"><a href="#">Web</a>
	<ul>
		<li class="subcat"><a href="#">PHP</a>
			<ul class="book">
				<li>php book1</li>
				<li>php book2</li>
			</ul>
		</li>		
		
		<li class="subcat"><a href="#">JS</a>
			<ul class="book">
				<li>adada</li>
				<li>2121</li>
	
				<li><a class="item0"  target="_blank" href="#">jQuery учебник для начинающих - Антон Шевчук</a></li>
				<li>22</li>
			</ul>
		</li>
		
		<li class="subcat"><a href="#">CSS</a>
			<ul class="book">
				<li>adada</li>
				<li>2121</li>
			</ul>
		</li>		
		
		<li class="subcat"><a href="#">HTML</a>
			<ul>
				<li>adada</li>
				<li>2121</li>
			</ul>
		</li>
	</ul>
</li>
<li class="subcat"><a href="#">Windows</a>
	<ul>
		<li class="subcat"><a href="#">Главное</a>
			<ul class="book">
				<li>adada</li>
				<li>2121</li>
			</ul>
		</li>		
		
		<li class="subcat"><a href="#">Потоки</a>
			<ul class="book">
				<li>adada</li>
				<li>2121</li>
			</ul>
		</li>
		
		<li class="subcat"><a href="#">Службы</a>
			<ul class="book">
				<li>adada</li>
				<li>2121</li>
			</ul>
		</li>		
		
		<li class="subcat"><a href="#">Графика</a>
			<ul class="book">
				<li><a class="item0" href="file:///20API.pdf" target="_blank">Проектирование интерфейса пользователя средствами Win32 api</a> - Р.М.Ганеев</li>
				<li><a class="item0" href="file:///D:iya_3643348.pdf" target="_blank">Технология программирования C++ Winapi</a> - Литвиненко</li>
			</ul>
		</li>
	</ul>
</li>
</ol>



</body></html>

рони 04.10.2021 15:59

win32s,
$(function() {
            $("li.subcat").on("click", ">a", function(event) {
                $(this).next().toggle();
            });
        });

win32s 04.10.2021 16:06

рони
Спасибо! А почему так? В чем ошибка?
в плане, почему если клик назначен на li.subcat, он срабатывает и на обычном Li ?

ksa 04.10.2021 16:28

Цитата:

Сообщение от win32s
почему если клик назначен на li.subcat, он срабатывает и на обычном Li ?

Не на "обычном li"... А на всем содержимом тега li.subcat.

win32s 04.10.2021 19:42

Ага, спасибо, теперь все понял! Сложно это всё.


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