手风琴显示找到下一个div

Question

进度：https://jsfiddle.net/zigzag/jstuq9ok/4/

可能有几种方法可以做到这一点，但我有一个名为sub的类，我添加它来隐藏'嵌套'Div，然后使用jQuery切换Glyphicon并显示'嵌套'Div。有人问：

$('.menu-toggle').click(function() {
  $(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
  //How to do something like this to traverse the click and structure $(this).parent.find('.sub:first-child').toggle();
  $('.sub').toggle();
  $('.subsecond').toggle();
});

嵌套团队结构的目的是：

1. 亚当

2. 百合

   2.1 Sen

   2.1.1坦克

   2.2另一位参议员

3. 贾斯汀

我正在尝试做的是根据点击发生的位置显示其下的子部分，遍历DOM。我的内容来自源系统，所以不能直接硬编码。

如果您有任何疑问，请与我联系。

Answer 1

您可以使用.closest('.row') 找到下一个div来获取父.row 和.next('.row') 以获取父.row的下一个.row < / em>如果它有或没有使用hasClass()，那么你可以使用

$('.menu-toggle').click(function(e) {
  e.preventDefault();  // prevent <a> to redirect to the top of the page
  $('.row:not(.sub):not(.subsecond)').not($('.sub').prev('.row')).not($('.subsecond').prev('.row')).not($(this).closest('.row')).find('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
  $(this).find('span').toggleClass('glyphicon-menu-down glyphicon-menu-up');
  var Nextrow = $(this).closest('.row').next('.row');  // get the next row
  if(Nextrow.hasClass('sub')){   // if next row has class sub
    $('.sub').not(Nextrow).hide();  // hide all sub but not this one
    Nextrow.slideToggle(function(){
      if($(this).is(':hidden')){ // check if the .sub is hidden 
        $('.subsecond').hide();  // hide subsecond
        $('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');  // toggle arrows to the down
      }
    });      // toggle this sub row
    return false;
  }
  if(Nextrow.hasClass('subsecond')){ // if next row has class subsecond
    $('.subsecond').not(Nextrow).hide(); // hide all subsecond but not this one
    Nextrow.slideToggle();   // toggle this subsecond row
    return false;
  }
});

See Example