Click should only work on parent UL not sub UL
Hi there.
I've a navigation menu that has some sub-menus and I want to show them only after a click on the parent link. But every click on the sub-menu collapse the menu again.
- $('ul#nav>li:has(ul)').click(function() {
- $(this).children('ul').slideToggle();
- return false;
- });
- <ul id="nav">
- <li><a href="#Home">Home</a></li>
- <li><a href="#Products">Products</a>
- <ul>
- <li><a href="#Apples">Apples</a></li>
- <li><a href="#Bananas">Bananas</a></li>
- </ul>
- </li>
- <li><a href="#Services">Services</a></li>
- </ul>
- </div>
When I click Products and than Apples it hides the level 2 UL. But it should go to #Apples instead. I can not change the HTML since it comes out of a CMS. So I have to deal with that structure.
How can I prevent the level 2 UL collapses when I click on Apples or Bananas?
Hope someone can help. Thanks!