ik heb een menu :
<ul class="drop_menu">
<li><a href="#" id="active" class="openLink">Button 1</a></li>
<li><a href="#">Button 2</a><ul class="submenu">
<li><a href="#" class="openMenu">Subbutton 1</a></li>
<li><a href="#" class="openMenu">Subbutton 2</a></li>
</ul></li>
<li><a href="#" class="openLink">Button 3</a></li>
<li><a href="#" class="openLink">Button 4</a></li>
</ul>
Nou wil ik dit afhandelen met jquery:
$('body').on('click', '.openMenu', function (event){
event.preventDefault();
$('html, body').animate({scrollTop: '0px'}, 500);
var tMenu = $(this).attr('href');
$( '#menukaart').load('menu/' + tMenu );
$('#menukaart').show(1000);
});
$('body').on('click', '.openLink', function (event){
event.preventDefault();
var tButton = $(this);
tPage = tButton.attr('href');
//Loop hier
tButton.attr("id","active");
$( '#section').load('pages/' + tPage );
$('html, body').animate({scrollTop: '0px'}, 500);
});
Zoals je hierboven al ziet, veranderd de knop waar ik op klik (van .openLink) het ID naar active.
Maar dan heb ik straks dus alle knoppen op active staan.
Ik zou graag door de .sub_menu willen loopen en van alle A objecten het ID leeg maken.
En daarna pas mijn huidige knop op active zetten
Ik denk dat dit niet bepaald zo netjes is:
$('.drop_menu').children('li').each(function () {
$(this).children('a').each(function () {
$(this).attr("id","");
});
});
Heeft er iemand een quick-fix voor me ?