在 jquery 手风琴中单击另一个 li 时自动关闭 li [英] auto closing li when cliclking another li in a jquery accordion

问题描述

我正在制作这个手风琴，里面有 ul li.我想在单击单个 li 时自动关闭所有打开的 li.到目前为止，我已经完成了这个.它的问题是，当我单击一个 li 时，我有在打开另一个之前再次单击它以关闭它.我只想在打开另一个之前自动关闭每个打开的 li.不知道该怎么做.请有人帮我做这个...

HTML 代码

 
<ul class="1st_menu"><li><a href="#"><span>D'MAIRE 账户</span></a><ul class="sub-menu" id="info_list1"><li class="has_par"><a href="#" class="show_par icon_plus">小部件</a><p style="display:none" class="par_desc">Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor</p><li class="has_par"><a href="#" class="show_par icon_plus">菜单</a><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod t</p><li class="has_par"><a href="#" class="show_par icon_plus">产品</a><p>quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequat</p>

jquery 代码

 $(document).ready(function(){var $li_p = $('ul[class="sub-menu"] li').children('p');var $li_a = $('ul[class="sub-menu"] li').children('a');if($li_p.slideToggle().toggleClass('closed')){$li_p.hide();}$('ul[class="sub-menu"] li').click(function() {var ullist = $(this).children('p:first');ullist.slideToggle().toggleClass('关闭');var isVisible = ullist.is(".closed");var img_icon = $(this).children('a');如果(isVisible === true){img_icon.removeClass('icon_minus').addClass('icon_plus');} 别的 {img_icon.removeClass('icon_plus').addClass('icon_minus');}});});

解决方案

您可以使用 jquerysiblings 方法抓取所有相邻的 li 标签，然后循环检查它们是否打开.如果它们是打开的，那么您可以关闭它们并删除减号类并添加加号类.

varsiblings = $(this).siblings('li');$.each(siblings, function (i, key) {if ($(key).find('a').hasClass('icon_minus')) {var 兄弟 = $(key).children('p:first');$(sibling).slideToggle().addClass('closed');$(key).find('a').removeClass('icon_minus').addClass('icon_plus');}});

工作 JSFiddle:http://jsfiddle.net/086zuboc/

I am making this accordion which has ul li's inside li.I want to automatic close all open li's when click on a single li.So far i have done this.The problem with it that when i click one li ,i have to click it again to close it before opening another one.I just want to autoclose every opened li before opening another one.Don't know how to do it.please someone help me making this...

HTML code

      <div class="main-menu">
                            <ul class="1st_menu">
                                <li><a href="#"><span>D'MAIRE ACCOUNT</span></a>
                                    <ul class="sub-menu" id="info_list1">
                                        <li class="has_par"><a href="#" class="show_par icon_plus">Widgets</a>
                                            <p style="display:none" class="par_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                                        </li>
                                        <li class="has_par"><a href="#" class="show_par icon_plus">Menus</a>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod t</p>
                                        </li>
                                        <li class="has_par"><a href="#" class="show_par icon_plus">Products</a>
                                            <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                                        </li>
                                    </ul>


    </li>
</ul>
    </div>

jquery code

   $(document).ready(function(){
  var $li_p = $('ul[class="sub-menu"] li').children('p');
  var $li_a = $('ul[class="sub-menu"] li').children('a');
  if($li_p.slideToggle().toggleClass('closed')){
    $li_p.hide();
  }
    $('ul[class="sub-menu"] li').click(function() {
     var ullist = $(this).children('p:first');
     ullist.slideToggle().toggleClass('closed');
     var isVisible = ullist.is(".closed");
     var img_icon = $(this).children('a');
     if (isVisible === true){
          img_icon.removeClass('icon_minus').addClass('icon_plus');
      } else {
          img_icon.removeClass('icon_plus').addClass('icon_minus');
      }
    });
  }); 

解决方案

You can use the jquery siblings method to grab all of the adjacent li tags and then loop over them to check to see if they are open. If they are open, you can then close them and remove the minus class and add the plus class.

var siblings = $(this).siblings('li');
$.each(siblings, function (i, key) {
    if ($(key).find('a').hasClass('icon_minus')) {         
        var sibling = $(key).children('p:first');
        $(sibling).slideToggle().addClass('closed');
      $(key).find('a').removeClass('icon_minus').addClass('icon_plus');
    }
});

Working JSFiddle: http://jsfiddle.net/086zuboc/

这篇关于在 jquery 手风琴中单击另一个 li 时自动关闭 li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！