Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.10.2021, 16:27
Интересующийся
Отправить личное сообщение для win32s Посмотреть профиль Найти все сообщения от win32s
 
Регистрация: 28.09.2019
Сообщений: 28

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

Т.е. если нажать на категорию РНР, то она сворачивается (книжки по РНР), но - если нажать на элемент списка (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>
Ответить с цитированием
  #2 (permalink)  
Старый 04.10.2021, 16:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

win32s,
$(function() {
            $("li.subcat").on("click", ">a", function(event) {
                $(this).next().toggle();
            });
        });
Ответить с цитированием
  #3 (permalink)  
Старый 04.10.2021, 17:06
Интересующийся
Отправить личное сообщение для win32s Посмотреть профиль Найти все сообщения от win32s
 
Регистрация: 28.09.2019
Сообщений: 28

рони
Спасибо! А почему так? В чем ошибка?
в плане, почему если клик назначен на li.subcat, он срабатывает и на обычном Li ?
Ответить с цитированием
  #4 (permalink)  
Старый 04.10.2021, 17:28
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,451

Сообщение от win32s
почему если клик назначен на li.subcat, он срабатывает и на обычном Li ?
Не на "обычном li"... А на всем содержимом тега li.subcat.
Ответить с цитированием
  #5 (permalink)  
Старый 04.10.2021, 20:42
Интересующийся
Отправить личное сообщение для win32s Посмотреть профиль Найти все сообщения от win32s
 
Регистрация: 28.09.2019
Сообщений: 28

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Двойной динамический список. oneplus Элементы интерфейса 17 14.08.2015 23:42
Сохранить вложенный список kuznetsov131 Элементы интерфейса 6 05.08.2013 05:43
Событие click Гробовщик jQuery 1 31.07.2013 07:28
Событие на динамически созданные элементы списка Arigato Events/DOM/Window 7 12.12.2011 08:28
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 11:46