javascript - 如何一个一个地切换每个 <li> ？

Question

我有一个像这样的 HTMl:-

<li rel="leftmenu-root-add_section" class="accordion">
                <a href="javascript:void(0)">
                    <i class="fa fa-plus"></i><span style="font-size: 20px"><b>Add</b></span>
                </a>
            </li>
            <div class="panel"><ul class="test">
                    <li rel="leftmenu-root-add_post">
                        <a href="<?php echo base_url();?>admin/post/add_post">
                            <i class="fa fa-pencil"></i> <span>Post</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_announcement">
                        <a href="<?php echo base_url();?>admin/announcement/add_announcement">
                            <i class="fa fa-volume-up"></i> <span>Announcement</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_page">
                        <a href="<?php echo base_url();?>admin/page/add_page">
                            <i class="fa fa-file-o"></i> <span>Pages</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_tag">
                        <a href="<?php echo base_url();?>admin/tag/add_tag">
                            <i class="fa fa-tags"></i> <span>Tag</span>
                        </a>
                    </li>

               </ul>
               </div>

我想点击“accordion”，以及<div class="panel"><ul class="test">下的各个菜单隐藏起来。

我试过这段代码，但出了点问题。

$('.accordion').on('click',function(){
            var ulist = $(this).closest('div').find('ul');
            alert(ulist.attr('class'));
            alert('Hii');
        });

编辑:-

给出的建议在这个问题上很棒。不过，我还有一些要求。

div 越来越隐藏和可见。我想花一些过渡时间更像是 SlideUp & SildeDown jQuery 的功能。

但是，不是隐藏总 div 或所有 <li>马上，我想让一里躲起来，等一小段时间，然后再躲下一里。

Answer 1

你可以这样做:

$(function() {
  $('.accordion').on('click', function() {
   var ulist = $(this).next('.panel').find("ul.test");
   ulist.toggle();
  });
});

查看它在 fiddle 中的工作情况.

解释是你需要在 DOM 加载后进行事件绑定(bind)，所以你需要将你的代码放在 $(funciton(){... 中。它就像一个 $("文档").ready();

然后，在您的事件绑定(bind)中，您选择下一个 .panel 到您单击的 .accordion。获得它后，您可以搜索要隐藏的 ul.test。为此，您调用 toggle，这样每次您单击该元素时，它都会显示/隐藏 ul。

编辑

如果你想要那种效果，你应该为每个 li 拍照，然后一个一个地隐藏并添加延迟。喜欢this :

$(function() {
  $('.accordion').on('click', function() {
     var ulist = $(this).next('.panel').find("ul.test li");
     var count = 0;
     var delay = 300;

     $.each(ulist, function(){
        $(this).delay(delay*count).fadeToggle();
        count++;
     });
  });
});