手风琴显示找到下一个div

时间:2017-12-19 23:25:35

标签: javascript jquery html css

进度: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. 贾斯汀

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

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

1 个答案:

答案 0 :(得分: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