Question

我正在尝试同时执行slideToggle和toggleClass：

CSS

li ul { display: none; }

HTML

<li>
    <div class="group"><i class="arrow_maximize"></i> Title</div>
    <ul>
        <li>anything</li>
    </ul>
</li>

JS

'click .group': function (event) {
        $(event.currentTarget).next('ul').slideToggle(200);
        $(event.currentTarget).children('i').toggleClass('arrow_minimize');
}

我试图得到的是：

点击.group会滑动ul;同时，i的类应更改为'arrow_minimize'。
再次点击即可将其设置为：ul的幻灯片，将i的类更改为'arrow_maximize'

Answer 1

在<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/home" android:title="@string/action_logo" android:contentDescription="@string/action_logo" android:icon="@drawable/ic_s_logo_48x48" android:gravity="start" android:clickable="true" app:showAsAction="always" /> </android.support.v7.widget.Toolbar>中，您还需要指定元素已经具有的其他类：

toggleClass

$(function(){
  $('.group').on('click', function(){
    $(this).next('ul').slideToggle(200);
    $(this).children('i').toggleClass('arrow_minimize arrow_maximize');
  });
});

li ul { display: none }
i.arrow_maximize:before { content: "\25ba" }
i.arrow_minimize:before { content: "\25bc" }

同时执行slideToggle和toggleClass

1 个答案: