jQuery手風琴在嵌套的HTML觸發不起作用

Question

基本上我試圖找到下一個'sacc觸發器'但'下一步（）'不工作，因爲它嵌套到列表中;我已經嘗試了許多變體，比如parent（）。next（），但是我無法使它工作。也許如果有人能指點我一個方向;會好的。

我有以下的HTML代碼：

<ul class="taxo2"> 
    <li class=""> 
     <div class="sacc-trigger active" style="width: 0px;"> 
      Photos 
     </div> 
     <div class="sacc-container" style="display: block; width: 0px;"> 
     </div> 
    </li> 
    <li class=""> 
     <div class="sacc-trigger" style="width: 0px;"> 
      Statements 
     </div> 
     <div class="sacc-container" style="display: none; width: 0px;"> 
     </div> 
    </li> 
    <li class=""> 
     <div class="sacc-trigger" style="width: 0px;"> 
      Powerpoint Presentations 
     </div> 
     <div class="sacc-container" style="display: none; width: 0px;"> 
     </div> 
    </li> 
    <li class=""> 
     <div class="sacc-trigger" style="width: 0px;"> 
      Videos/Interviews 
     </div> 
     <div class="sacc-container" style="display: none; width: 0px;"> 
     </div> 
    </li> 
</ul> 

，並試圖使其與jQuery的手風琴工作;有我在努力適應以下來源：

(function() { 

      var $container = $('.sacc-container'), $trigger = $('.sacc-trigger'); 

      $container.hide(); 
      $trigger.first().addClass('active').next().show(); 

      var fullWidth = $container.outerWidth(true); 
      $trigger.css('width', fullWidth); 
      $container.css('width', fullWidth); 

      $trigger.on('click', function(e) { 

       if ($(this).next().is(':hidden')) { 
        alert('here2'); 
        $trigger.removeClass('active').next().slideUp(300); 
        $(this).toggleClass('active').next().slideDown(300); 
       } 
       e.preventDefault(); 
      }); 

      // Resize 
      $(window).on('resize', function() { 
       fullWidth = $container.outerWidth(true) 
       $trigger.css('width', $trigger.parent().width()); 
       $container.css('width', $container.parent().width()); 
      }); 

     })(); 

Answer 1

你想使用jQuery的parent()獲取父li，然後用.next找到以下li。從這裏你可以使用.find()得到觸發：

if ($(this).parent("li").next().find(".sacc-trigger").is(':hidden')) { 
    $trigger.removeClass('active').next().slideUp(300); 
    $(this).toggleClass('active').next().slideDown(300); 
} 

這背後的原因是因爲.sacc-trigger沒有直接兄弟姐妹，所以你需要先找到最接近的父母，然後再往使用next()一個級別如上所述。