Добрый вечер!
Погуглил и нашел пару ответов на тостере и на stackoverflow в итоге они оказались не тем, что мне нужно.
Вопрос такой: нужно чтобы каждой определенной категории товара по клику выходил скрытый блок со списком его подкатегории.
Проблема такая: те решения, который я находил они не подходили мне потому что по клику выходил скрытый блок со списком подкатегории на ширину дочернего элемента. То есть вот так
Скрин
Происходило это по причине того, что этот скрытый блок был обернут в одном блоке с дочерним элементом и соответственно брал его ширину.
Далее я вытащил скрытый блок с классом
.category-list из дочернего элемента
.catalog-item и поместил ниже. Вы можете увидеть это тут
Пример на JSFIDDLE
Теперь тот код что я взял из результатов гугла не работает. Он был таков:
$(document).click(function(e){
var t = $(e.target).closest("#catalog-tree > li");
$(".active").not(t).removeClass("active");
$(e.target).closest("#catalog-tree > li > a").length && t.toggleClass("active");
});
Повторюсь еще раз не работает потому что мы вытащили скрытый блок из дочернего элемента.
Вот как список должен выглядеть на разных устроиствах:
joxi.ru/52av5aqsGQzaaA ПК
joxi.ru/v29XLxjhGKyPGm ПЛАНШЕТЫ
joxi.ru/n2YZeQKSj1zQVA МОБИЛЬНЫЕ
То есть список должен на всю ширину родителя
.catalog-tree
Как должен работать скрипт, который кто-нибудь поможет сляпать?
1) При клике на .catalog-item к нему должен добавляться класс .active и показываться скрытый блок (список подкатегории)
2) Пока этот элемент активен скрытый список все еще показывается, после того как мышкой тыкнули в другое место или по ссылке в этом списке подкатегории то блок опять скрывается и класс .active уходит с элемента .catalog-item
Я бы конечно сам, но у меня js очень сильно хромает.
Простой
