javascript - 切换多个 jQuery 图标

Question

我在 jQuery 中切换图标时遇到一些问题。

每个切换部分的 html 是:

<h2 class="collapse"><span class="ui-icon ui-icon-triangle-1-e"></span>Section 1.1</h2>
<p>Hidden text.</p>

和 JavaScript:

jQuery(document).ready(function () {
    $(".collapse").click(function () {
        $(this).next().toggle();
        $("span").toggleClass("ui-icon-triangle-1-s");
    }).next().hide();
});

JSfiddle 也 here .

当我单击任何可折叠部分时，所有图标都会立即更改，但并非所有图标都展开/折叠。

我也无法让我的图标与文本位于同一行，尽管这是一个较小的问题。

Answer 1

给你:http://jsfiddle.net/gy653bpL/15/ 。

添加一些CSS:

.collapse span {display:inline-block;}

仅切换事件范围:

$(this).find("span").toggleClass("ui-icon-triangle-1-s");