javascript - jQuery 目标 next() html 项目

Question

嗨，我有一个像这样生成的项目列表:

    <li class="panel-title">Item 1<i class="fa pull-right fa-plus"></i></li>
    <ul class="panel-body">...</ul>
    <li class="panel-title">Item 2<i class="fa pull-right fa-plus"></i></li>
    <ul class="panel-body">...</ul>
    <li class="panel-title">Item 3<i class="fa pull-right fa-plus"></i></li>
    <ul class="panel-body">...</ul>

单击“li”项目后，我只需要下一个“ul”即可展开。不确定如何解决这个问题以及 next() 是否是正确的操作这是我的代码

  $('li.panel-title > .fa').on("click",function() {
  var $currIcon = $(this); 
  var $contents = $('ul.panel-body');         
  if($currIcon.hasClass('fa-plus')) {   

          $currIcon.$contents.next().slideDown();             
          $currIcon.removeClass('fa-plus');
          $currIcon.addClass('fa-minus');             
  } else if($currIcon.hasClass('fa-minus')) {             
          $currIcon.$contents.next().slideUp();                   
          $currIcon.removeClass('fa-minus');
          $currIcon.addClass('fa-plus');
  }  
 });

Answer 1

试试这个

$('li.panel-title > .fa').on("click",function() {
  var $currIcon = $(this); 
  var $contents = $('ul.panel-body');         
  if($currIcon.hasClass('fa-plus')) {
          $currIcon.parent().next().slideDown();             
          $currIcon.removeClass('fa-plus');
          $currIcon.addClass('fa-minus');             
  } else if($currIcon.hasClass('fa-minus')) {             
          $currIcon.parent().next().slideUp();                   
          $currIcon.removeClass('fa-minus');
          $currIcon.addClass('fa-plus');
  }  
 });