ul 中特定 LI 元素内的一个子 DIV 中的 toggleClass()

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>

单击特定的<li> 元素后，我尝试在具有“内部”类的 div 上创建 addClass()。我已经有动画和其他几个动作，如下所示：

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()、closest()、children() 这样的方法都对我不起作用。 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");
            }           
        });