Открытие субменю по клику, а не по hover

[tolyan]

Имею такое меню в NavBar:

Код: Выделить всё

li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
О гостинице
<span class="caret"></span>
</a>
<ul id="yw1" class="dropdown-menu">
<li>
<a href="/informatciia/ekskursiia-po-solnechnomu-zamku" tabindex="-1">Экскурсия</a>
</li>
<li class="dropdown-submenu">
<a href="#" tabindex="-1">Услуги</a>
<ul id="yw2" class="dropdown-menu" style="display: block;">
<li>
<a href="/uslugi/uslugi" tabindex="-1">Услуги</a>
</li>
<li>
<a href="/informatciia/ekonomiia-vody" tabindex="-1">Экономия воды</a>
</li>
<li>
<a href="/uslugi/travniki" tabindex="-1">Травники</a>
</li>
<li>
<a href="/uslugi/travianye-chai-i-tcelebnye-sbory" tabindex="-1">Травяные чаи</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" tabindex="-1">Питание</a>
<ul id="yw3" class="dropdown-menu" style="display: none;">
<li>
<a href="/uslugi/pitanie" tabindex="-1">Питание</a>
</li>
<li>
<a href="/informatciia/meniu-kafe-gesem" tabindex="-1">Меню кафе &quot;Гесем&quot;</a>
</li>
</ul>
</li>
<li>
<a href="/informatciia/otdykh-s-detmi" tabindex="-1">Отдых с детьми</a>
</li>
<li>
<a href="/uslugi/transfer" tabindex="-1">Трансфер</a>
</li>
<li>
<a href="/informatciia/kak-do-nas-dobratsia" tabindex="-1">Как до нас добраться</a>
</li>
<li>
<a href="/informatciia/voprosy-i-otvety" tabindex="-1">Вопросы и ответы</a>
</li>
</ul>
</li>
 

Субменю выпадает по hover. Лечу это так:

Код: Выделить всё

.dropdown-submenu:hover > .dropdown-menu {
  display: none;
} 

И обрабатываю клик по субменю:

Код: Выделить всё

$('.dropdown-submenu').click(function(){
  var crnt = $(this).children('.dropdown-submenu > .dropdown-menu').css('display');
  var nw = crnt == 'block' ? 'none' : 'block';
  $(this).children('.dropdown-submenu > .dropdown-menu').css('display',nw);
  return false;
});
 

Таким образом клик по меню приводит к появлению скрытию субменю. Проблема в том, что при таком раскладе клики по пунктам субменю не работают. Меню просто закрывается и перехода по url не происходит.

Как это вылечить?

[ATI]

Может:

Код: Выделить всё

$(this).children('.dropdown-menu')

[tolyan]

Может:

Код: Выделить всё

$(this).children('.dropdown-menu')
 

поменял:

Код: Выделить всё

$('.dropdown-submenu').click(function(){
  var node = $(this).children('.dropdown-menu');  
  var nw = node.css('display') == 'block' ? 'none' : 'block';
  node.css('display',nw);
  return false;
});
 

Ничего не изменилось. Еще варианты?

[lynicidn]

toggle уже не прикалывает?

[tolyan]

toggle уже не прикалывает?

Ткните носом в урл, где описано решение моей задачи используя toggle.

[lynicidn]

http://api.jquery.com/toggleclass/
вместо хайлайта юзайте класс .hidden {display: none;}

[lynicidn]

Или вот http://api.jquery.com/toggle/

[lynicidn]

набросал http://jsfiddle.net/K2ed2/