切换多个 jQuery 图标答案

【问题标题】：Toggling multiple jQuery icons切换多个 jQuery 图标
【发布时间】：2015-01-06 13:45:21
【问题描述】：

我在 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.

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

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

【问题讨论】：

标签： javascript jquery html icons

【解决方案1】：

你去：http://jsfiddle.net/gy653bpL/15/。

添加一些 CSS ：

.collapse span {display:inline-block;}

只使用活动范围：

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

【讨论】：

【解决方案2】：

您正在定位所有跨度元素。您只需定位点击的 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

【讨论】：