Question

I have a navigation bar that has two dropdowns (as nested ul’s). I’m trying to toggle the subnavs when its parent is clicked. Or hide one subnav when the other parent is clicked. Here’s the markup:

<div id="nav-bar">
  <a href="#">A link</a> |
  <ul>
    <li id="feedback">
      <a href="javascript:void(0);">Feedback</a>
      <ul class="subnav">
        <li><a href="#">Give us feedback</a></li>
       </ul>
     </li>
  </ul> |
  <a href="#">Another link</a> |
  <ul>
    <li id="location">
      <a href="javascript:void(0);">Pick your location</a>
      <ul class="subnav">
        <li><a href="#">Los Angeles</a></li>
        <li><a href="#">New York</a></li>
       </ul>
     </li>
  </ul>
</div>

And the code:

//hide the subnavs and give them a little down arrow
$('ul.subnav').hide().parent().append('<small>&#9660;</small>');

// show its subnav when clicked
$('#nav-bar ul li').click(function() {
  var subnav = $(this).children('ul.subnav');
  // hide the other's subnav if it's visible
  if ($(this).attr('id') == 'location') {
    subnav.toggle();
    $('li#feedback').children('ul.subnav').hide();
  } else {
    subnav.toggle();
    $('li#location').children('ul.subnav').hide();
  }
});

Still a novice to JS and jQuery, I’d like to know if there’s a less verbose way to accomplish what I’m trying to do above.

Edit: A better question is, is there a way to do this without having to explicitly give the li’s an id?

Answer 1

A better format would be something like this for your HTML:

<ul id="nav-bar">
  <li><a href="#">A link</a> |</li>
  <li>
    <a href="#">Feedback</a> |
    <ul class="subnav">
      <li><a href="#">Give us feedback</a></li>
     </ul>
  </li>
  <li><a href="#">Another link</a> |</li>
  <li>
    <a href="#">Pick your location</a> |
    <ul class="subnav">
      <li><a href="#">Los Angeles</a></li>
      <li><a href="#">New York</a></li>
     </ul>
   </li>
</ul>

Then your jQuery code would look like this:

$(function(){
  var $nav    = $("#nav-bar"),
      $subnav = $nav.find("ul.subnav").hide();

  $nav.children('li:has(ul.subnav)').click(function(e){
    e.preventDefault();
    var $sub = $(this).children('ul.subnav').toggle();
    $subnav.not($sub).hide();
  })
})