при нажатии переключить ul - при нажатии в другом месте скрыть ul

Question

Привет всем - мой второй день попытки jquery для задачи на работе, и я немного застрял.

У меня есть неупорядоченный список ссылок .. внутри неупорядоченного списка ссылок

при нажатии <li class="headlink"> я бы хотел, чтобы дочерний элемент <li class="headlink"> <ul> стал видимым.

При щелчке мышью (в любом месте документа) я бы хотел, чтобы ребенок <ul> исчез.

По умолчанию дочерний элемент <ul> в таблице стилей скрыт.

HTML

<ul id="cssdropdown">
    <li><a href="#">A</a></li>
    <li class="headlink">
        <a href="#">B</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>
    </li>
    <li><a href="#">C</a></li>
</ul>

JQuery

<script type="text/javascript">

    $(document).ready(function(){
        $('#cssdropdown li.headlink').click(
            function() { $('ul', this).toggle("slow"); });
    });


    $(document).ready(function(){
        $('body').click(function() { 
            $('li ul:visible').hide("slow") } ) } );

</script>

Проблема - когда я нажимаю <li class="headlink">, я получаю эффект йойо, где отображается дочерний UL, а затем прячется.

любой совет высоко ценится.

Answer 1

Вы должны предотвратить распространение события обратно на тело:

$(document).ready(function(){
    $('#cssdropdown li.headlink').click(function(event) {
      $('ul', this).toggle("slow");
      event.stopPropagation();
    });
});

И чтобы скрыть текущие открытые позиции:

$(document).ready(function(){
    $('#cssdropdown li.headlink').click(function(event) {
      $(this).siblings(".headlink").hide("slow");
      $('ul', this).toggle("slow");
      event.stopPropagation();
    });
});

Answer 2

Это исправит проблему с эффектом "йо-йо": (отмена распространения)

$(document).ready(function(){
    $('#cssdropdown li.headlink').click(
        function(event) { 
          $('ul', this).toggle("slow"); 
          event.stopPropagation()
      });
});