Имеем следующую конструкцию:
<ul id="nav-mainmenu">
<li>
<span id="odmb">Кнопка 1</span>
<ul id="nav-mainmenu">...</ul>
</li>
<li>
<span id="odmb">Кнопка 2</span>
<ul id="nav-mainmenu">...</ul>
</li>
...
</ul>
Как с помощью jQuery добится следующего?:
При нажатии на 'Кнопка 1' для '<ul id="nav-mainmenu">' сразу под этой кнопкой добавлялся класс 'active':
<ul id="nav-mainmenu">
<li>
<span id="odmb">Кнопка 1</span>
<ul id="nav-mainmenu" class="active">...</ul>
</li>
<li>
<span id="odmb">Кнопка 2</span>
<ul id="nav-mainmenu">...</ul>
</li>
...
</ul>
А при нажатии на кнопку 'Кнопка 2' для '<ul id="nav-mainmenu">' сразу под этой кнопкой добавлялся класс 'active' и убирался класс 'active' у любого другого '<ul id="nav-mainmenu" class="active">':
<ul id="nav-mainmenu">
<li>
<span id="odmb">Кнопка 1</span>
<ul id="nav-mainmenu">...</ul>
</li>
<li>
<span id="odmb">Кнопка 2</span>
<ul id="nav-mainmenu" class="active">...</ul>
</li>
...
</ul>
-------
По сути как добиться эффекта открытия подпуктов меню, при этом прятать открытые ранее подпункты меню, учитывая что меню может быть многоуровневым, но структура всегда одинаковая?
<ul id="nav-mainmenu">
<li>
<span id="odmb">Кнопка 1</span>
<ul id="nav-mainmenu">
<span id="odmb">Кнопка 2</span>
<ul id="nav-mainmenu">
<span id="odmb">Кнопка 3</span>
<ul id="nav-mainmenu" class="active">...</ul>
</ul>
</ul>
</li>
...
</ul>