Question

Ideally I would like to have a list like this:

<ul class="parent" id="app1">
  <li><a href="#">Item 1</a>
    <ul class="child">
      <li><a href="#">Sub Item 1 - 1</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
</ul>

I need to know the x,y coordinate of the <li> after its clicked.

$('.parent > li').click( function() {

  var x = $(this)...  // x coordinate
  var y = $(this)...  // y coordinate
  var sub_y = y + $(this).height();
  var sub_x = x; // want x to be 0 (left side of ul.parent)

});

Answer 1

See the demo->

Use .position():

$('.parent > li').click( function() {
  var pos = $(this).position();
  var x = pos.left;  // x coordinate
  var y = pos.top;  // y coordinate
  var sub_y = y + $(this).height();
  var sub_x = x; // want x to be 0 (left side of ul.parent)
  alert(x + ', ' + y);
});

This will allow you to get the computed top and left position of the element.