title: Jquery to select anchor tag by going through UL tag
body: <p>I want to select anchor tag in a div, but I want to select from the child ul tag as I am trying to create a dropdown.</p>
  
  <p>My HTML code is as below:</p>
  
  <pre><code>&lt;div&gt;
    &lt;a href='#'&gt;Dropper 1&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a href='#'&gt;Dropper 2&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;Item 4&lt;/li&gt;
      &lt;li&gt;Item 5&lt;/li&gt;
      &lt;li&gt;Item 6&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JQuery code is as below:</p>
  
  <pre><code>$(document).ready(function(){
    $('ul').each(function(){
      $(this).parent().click(function(){ $('ul',this).show("1000"); });
      $(this).parent().mouseleave(function(){ $('ul',this).hide("1000"); });
    });
  })
  </code></pre>
  
  <p>CSS for the UL code is as below:</p>
  
  <pre><code>ul {display:none;}
  </code></pre>
  
  <p>Now the UL is hidden and I want to select anchor using the UL. The above function is working right now because it is picking DIV as a parent and on clicking a div, ul is shown, but because the size of div is as same size of anchor tag so if anyone is clicking on div is same as clicking its child that is anchor and when click on anchor takes place then browser's default behavior is to scroll to top because of <strong>href='#'</strong>. I want to select that anchor to stop the scroll by using <strong>event.preventDefault();</strong></p>
  
  <p>Just tell me the way to select that anchor tag by going through UL</p>