Пишу код обработки вложенного списка, почему-то клик срабатывает не только на категории, а и на элементы (хотя не должно вроде).
Т.е. если нажать на категорию РНР, то она сворачивается (книжки по РНР), но - если нажать на элемент списка (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>