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">时，我得到yoyo效果，显示孩子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()
      });
});

点击切换ul - 点击其他地方隐藏ul

2 个答案: