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＆amp; jQuery的SildeDown函数。

但是，我不想一次隐藏总div或所有<li> s，而是想让一个li隐藏起来，等待一段时间然后隐藏下一个。

Answer 1

你可以这样做：

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

在fiddle中查看它。

解释是您需要在DOM加载后执行事件绑定，因此您需要将代码放在$(funciton(){...内。这就像$("document").ready();

然后，在您的事件绑定中，选择您点击的.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++; }); }); });

Answer 2

$('.accordion').on('click',function(){
   $(this).siblings('div').find('ul').toggle();
});

Answer 3

试试这个代码段。

修改1 逐个隐藏li。

根据您的要求使用slideToggle。

＆＃13;

$('.accordion').on('click',function(){
   //Get all li
   var liVar = $(this).next('div.panel').children('ul').find('li');
   //Call function for interval
   callFunction(liVar);
});
var interval;
//Function for interval to hide one by one
function callFunction(liVar){
  var temp=0;  
  interval = window.setInterval(function(){
     //Clear interval
     if(temp >= liVar.length)
     {
       clearInterval(interval);
     }
     liVar.eq(temp).slideToggle(1000);
     temp += 1;
   }, 1000);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="javascript:void(0)">
                            <i class="fa fa-pencil"></i> <span>Post</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_announcement">
                        <a href="javascript:void(0)">
                            <i class="fa fa-volume-up"></i> <span>Announcement</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_page">
                        <a href="javascript:void(0)">
                            <i class="fa fa-file-o"></i> <span>Pages</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_tag">
                        <a href="javascript:void(0)">
                            <i class="fa fa-tags"></i> <span>Tag</span>
                        </a>
                    </li>

               </ul>
               </div>
<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>Edit</b></span>
                </a>
            </li>
            <div class="panel"><ul class="test">
                    <li rel="leftmenu-root-add_post">
                        <a href="javascript:void(0)">
                            <i class="fa fa-pencil"></i> <span>Post</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_announcement">
                        <a href="javascript:void(0)">
                            <i class="fa fa-volume-up"></i> <span>Announcement</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_page">
                        <a href="javascript:void(0)">
                            <i class="fa fa-file-o"></i> <span>Pages</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_tag">
                        <a href="javascript:void(0)">
                            <i class="fa fa-tags"></i> <span>Tag</span>
                        </a>
                    </li>

               </ul>
               </div>

＆＃13;

如何逐个切换每个<li>？

编辑： -

3 个答案: