toggleClass（）在specyfic LI元素中一個孩子DIV在UL

Question

我有情況如下圖所示：

<div class="row folio"> 
    <ul class="fo-content"> 
    <li id="xxx"> 
     <p>Paragraph</p> 
     <div class="clearfix"></div> 
     <div class="inner"> 
     <span>Lorem ipsum</span> 
     </div> 
    </li> 
    <li id="xxx3"><p>Paragraph</p> 
     <div class="clearfix"></div> 
     <div class="inner"> 
     <span>Lorem ipsum</span> 
     </div> 
    </li> 
    </ul> 
</div> 

我儘量讓addClass（）與班 「內部」 點擊後具體<li>元股利。我媒體鏈接有動畫和其他幾個動作在這裏象下面這樣：

wideFolio: function() { 

      var list = $('.fo-content li'); 
      var id = $(this).attr('id'); 
      var inner = $(".fo-content li .inner"); 

      $('.fo-content li').on('click', function(a){ 
       a.preventDefault(); 

       if($(this).css("height") == "270px") { 
        inner.removeClass("opened"); 
        list.animate({ height: "270px" }, 500); 
        $(this).animate({height: "450px" }, 
        { 
        duration: 500, 
        complete: function() { 
         $("html, body").animate({ scrollTop: $(this).offset().top }, 
          { 
           duration: 500, 
           complete: function() { 

            $(this).find(".inner").addClass("opened"); 
           } 
          }); 
         } 
        }); 
       } 
       else { 
        $(this).animate({ height: "270px" }, 500); 
        inner.removeClass("opened"); 
       }   
      }); 
     } 

請，只注重最後complete:，我嘗試addClass（），因爲每次我嘗試做出這樣find方法（），最近（），兒童（），不適用於我。 Find（）方法正在添加類，但對所有<li>元素中的所有div，但我需要它只發生在一個單擊列表中的元素中。也許今天我太累了...謝謝大家。

Answer 1

您不應該在整個身體內尋找一個元素，而應該在調用該事件的元素內查找它。

 $('.fo-content li').on('click', function(a){ 
      $this_li = this; // ADD THIS LINE 
      a.preventDefault(); 

      if($(this).css("height") == "270px") { 
       inner.removeClass("opened"); 
       list.animate({ height: "270px" }, 500); 
       $(this).animate({height: "450px" }, 
       { 
       duration: 500, 
       complete: function() { 
        $("html, body").animate({ scrollTop: $(this).offset().top }, 
         { 
          duration: 500, 
          complete: function() { 
           $($this_li).find(".inner").addClass("opened"); // CHANGE THIS LINE 
          } 
         }); 
        } 
       }); 
      } 
      else { 
       $(this).animate({ height: "270px" }, 500); 
       inner.removeClass("opened"); 
      }   
     });