在 jquery 手风琴中点击另一个 li 时自动关闭 li

Question

我正在制作这个里面有 ul li 的手风琴 li.I 希望在单击单个 li.So 时自动关闭所有打开的 li ，到目前为止我已经解决了 this.The 问题当我单击一个 li 时，我必须再次单击它以关闭它才能打开另一个 one.I 只想在打开另一个 li 之前自动关闭每个打开的 li one.Don 不知道该怎么做 it.please 有人帮我做这个...

HTML代码

      <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代码

   $(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');
      }
    });
  });

Answer 1

用 .not(this) 排除当前元素

尝试这样的事情：

$('ul[class="sub-menu"] li').click(function() {
  $(this).parent().find('.li').not(this).addClass('closed');
  $(this).toggleClass('closed');
}

Answer 2

您可以使用jquery siblings 方法抓取所有相邻的 li 标签，然后循环检查它们是否打开。如果它们是打开的，您可以关闭它们并删除减号 class 并添加加号 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');
    }
});

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

在 jquery 手风琴中点击另一个 li 时自动关闭 li

auto closing li when cliclking another li in a jquery accordion

jquery

accordion