切换多个 jQuery 图标

Toggling multiple jQuery icons

本文关键字：jQuery 图标      更新时间：2023-09-26

我在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 也在这里。

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

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

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

添加一些 CSS ： 

.collapse span {display:inline-block;}

仅活动跨度： 

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

您定位的是所有 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;}

工作演示

相关文章：