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

您定位所有span元素。您只需要定位单击的h2元素的子span元素：

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图标

2 个答案: