Question

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

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标签，然后循环它们以检查它们是否打开。如果它们是打开的，您可以关闭它们并删除减去类并添加加号类。

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手风琴中陈述另一个李时，自动关闭李

2 个答案: