toggleClass() in ONE child DIV inside specific LI element in 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>

我尝试在单击特定 <li> 元素后使用 class "inner" 在 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: 我尝试添加 Class() 的地方，因为每次我尝试制作 find()、closest()、children() 等方法时，对我来说都不起作用。 Find() 方法正在添加 class，但添加到所有 <li> 元素内的所有 divs，但我需要它只发生在一个，从列表中单击的元素..也许我也是今天累了。。。谢谢大家。

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");
            }           
        });

toggleClass() in ONE child DIV inside specific LI element in ul

toggleClass() in ONE child DIV inside specyfic LI element in ul

javascript

jquery

addclass