切换多个 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.

当我单击任何可折叠部分时，所有图标都会立即更改，但不是全部 expand/collapse。

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

Answer 1

您正在定位所有跨度 elements.you 只需定位点击的 h2 元素的子跨度元素：

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

并将图标集样式 float 对齐到 left:

 .ui-icon-triangle-1-e{float:left;}

Working Demo

Answer 2

好了：http://jsfiddle.net/gy653bpL/15/。

添加一些 CSS :

.collapse span {display:inline-block;}

仅打开活动跨度：

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

切换多个 jQuery 图标

Toggling multiple jQuery icons

html

javascript

jquery

icons