jquery - 单击切换 ul - 单击其他地方隐藏 ul

Question

嘿大家 - 我在工作中尝试 jquery 的第二天，有点卡住了。

我有一个无序列表的链接..在无序列表的链接中

点击<li class="headlink"> ，我想要<li class="headlink">的 child <ul>变得可见。

点击(文档上的任何位置)后，我想要 child <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();
    });
});