Jquery для выбора тега привязки, пройдя через тег UL

Question

Я хочу выбрать тег привязки в div, но я хочу выбрать из дочернего тега ul, поскольку я пытаюсь создать раскрывающийся список.

Мой код HTML, как показано ниже:

<div>
  <a href='#'>Dropper 1</a>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <a href='#'>Dropper 2</a>
  <ul>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

Мой код JQuery выглядит так:

$(document).ready(function(){
  $('ul').each(function(){
    $(this).parent().click(function(){ $('ul',this).show("1000"); });
    $(this).parent().mouseleave(function(){ $('ul',this).hide("1000"); });
  });
})

CSS для кода UL выглядит следующим образом:

ul {display:none;}

Теперь UL скрыт, и я хочу выбрать привязку, используя UL. Вышеприведенная функция работает прямо сейчас, потому что она выбирает DIV в качестве родителя и при нажатии на div показывается ul, но поскольку размер div такой же, как и размер тега привязки, поэтому, если кто-то нажимает на div, то же самое, что и нажатие его дочерний элемент привязки, и когда происходит щелчок привязки, поведение браузера по умолчанию заключается в прокрутке вверх из-за href = '#'. Я хочу выбрать этот якорь, чтобы остановить прокрутку с помощью event.preventDefault();

Просто скажите мне, как выбрать этот тег привязки, пройдя через UL

Answer 1

Я думаю, что это то, что вы хотели:

$('ul').each(function() {
    $(this).prev('a').click(function(e) {
        e.preventDefault();
        $(this).next().show("1000");
    });
    $(this).mouseout(function() {
        $(this).hide("1000");
    });
});

http://jsfiddle.net/ghLCv/2/