У меня небольшая проблема с навигацией, которую я делаю.
Я хочу, чтобы моя навигация двигалась вниз с помощью подменю и не связывалась ни с чем, если у них есть дети. И если child active (), то родитель тоже должен быть активным, и автоматически показывать потомков.
Пока я сделал эту работу.
Теперь я хочу, чтобы родители изменили класс, если вы нажмете на них. Переключение между .active и обычным стилем. Я могу получить только стандартные ссылки для этого, и если вы щелкнете по неактивному родителю, то активный родитель должен сдвинуть детей вверх и деактивироваться.
Кто-нибудь, кто может помочь мне с этим вопросом?
Пока мой код выглядит так:
<ul class="menu collapsible expandactive" id="products">
<li class="item"><a href="#" >Tryksager</a>
<ul>
<li><a href="#">A3 / A4 Plakater</a></li>
<li><a href="#">Blokke</a></li>
<li><a href="#">Brevpapir</a></li>
<li><a href="#">Flyers / løsark</a></li>
<li><a href="#">Foldere</a></li>
<li><a href="#">Kuverter</a></li>
<li><a href="#">Visitkort</a></li>
</ul>
</li>
<li class="item active parent"><a href="#" >Storformat print</a>
<ul>
<li><a href="#">Plakater</a></li>
<li><a href="#">Canvas / Lærred</a></li>
<li class="active"><a href="#">Klistermærker</a></li>
<li><a href="#">Folie</a></li>
<li><a href="#">Rollup System</a></li>
</ul>
</li>
<li class="item"><a href="#" >Grafisk Design</a></li>
<li class="item"><a href="#" >Hjemmesider</a></li>
<li class="item"><a href="#" >Gør Det Selv</a></li>
<li class="item"><a href="#" >Om Trykkeriet</a></li>
<li class="item"><a href="#" >Diverse</a></li>
</ul>
А мой jQuery выглядит так:
function initProducts() {
$('ul#products ul').hide();
$.each($('ul#products'), function(){
$('#' + this.id + '.expandactive li.active ul').show();
});
$('ul#products li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal').removeClass('active');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initProducts();});