Showing nav dropdown when menu item is clicked

Question

I like the Twitter bootstrap, but don't need all the features. In it though is a drop down function that I'm trying to replicate.

This is my HTML:

<nav class="navigation" role="navigation">
    <ul class="a">
        <li><a class="" href="">Page 1</a></li>
        <li><a class="" href="">Page 2</a></li>

        <li>
            <a class="" href="">Page 3</a>
            <ul class="drop_down">
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li class="nav_divider"></li>
                <li><a href="#">List 3</a></li>
                <li><a href="#">List 4</a></li>
                <li><a href="#">List 5</a></li>
            </ul>
        </li>

        <li><a class="" href="">Page 4</a></li>
        <li><a class="" href="">Page 5</a></li>
    </ul>
</nav>

My javascript so far (it's not much):

$('nav.navigation li a').on('click', function() {
    if( $('nav.navigation li').has('ul.drop_down') ) {
        // Don't know how to add class to the clicked item,
        // and not all 'a' in the nav.
    }
});

Answer 1

$('nav.navigation li a').on('click', function(event) {
    if( $('nav.navigation li').has('ul.drop_down') ) {
        // Don't know how to add class to the clicked item,
          alert(event.target.id); //here do stuff  with that id 
    }
});

Answer 2

First it should be

$(function(){

  $('nav.navigation li a').on('click', function() {
    var $this = $(this);
    if( $this.parent('li').children('ul.drop_down').length ) {
        $this.addClass('someclass');
    }
  });

});

Demo: Plunker

Answer 3

$('nav.navigation li a').on('click', function(e) {
    if($(this).parent().has('ul.drop_down')) {
        $(this).siblings('ul.drop_down').addClass("className");
        e.preventDefault();
    }
});

Calling e.preventDefault(); will prevent redirecting, because I don't think you'd want that when you only want to show the dropdown.