Простой выпадающий список на JS

[volshebnyi]

Здравствуйте!

 

Помогите, пожалуйста, разобраться что именно я не так сделал. Необходимо сделать простой выпадающий список типа аккордеон на JS. Но при клике на ссылку подменю открывается, но при этом браузер прыгает наверх в начало страницы. Я так понимаю, не срабатывает slideToggle('slow')....

 

Вот что получается:

http://jsfiddle.net/b3vywd92/

 

Заранее благодарю за помощь!

[hypnocolor]

hypnocolor, Спасибо! Все работает. Только вот если у элемента нет выпадающего меню, то он все-равно выделяется. Можно сделать что бы не выделялся элемент если у него нет дочернего?

 

Можно: http://jsfiddle.net/hypnocolor/b3vywd92/2/

[satantx]

$(document).ready(function() {		$('ul.catalog-list > li > a').click(function() {			$(this).find('~ ul').stop().slideToggle('slow');            return false;		});	});

return false; добавить

[wwt]

        $('ul.catalog-list > li > a').click(function(event) {            event.preventDefault();

 

[hypnocolor]

Это из-за диеза (#) в ссылке. Можно поправить примерно так:

$(document).ready(function() {	$('ul.catalog-list > li > a').click(function(e) {		e.preventDefault();		$(this).find('~ ul').stop().slideToggle('slow');	});});

upd: реактивные вы

Edited October 9, 2015 by hypnocolor

[volshebnyi]

satantx и wwt, спасибо вам огромное! Оба варианта работают. Может быть подскажете еще такое - как присвоить раскрытому элементу (в данном случае это Элемент 3) класс active?

[hypnocolor]

satantx и wwt, спасибо вам огромное! Оба варианта работают. Может быть подскажете еще такое - как присвоить раскрытому элементу (в данном случае это Элемент 3) класс active?

 

http://jsfiddle.net/hypnocolor/b3vywd92/1/

[volshebnyi]

hypnocolor, Спасибо! Все работает. Только вот если у элемента нет выпадающего меню, то он все-равно выделяется. Можно сделать что бы не выделялся элемент если у него нет дочернего?

[volshebnyi]

hypnocolor, Спасибо огромное! Вы очень помогли мне!