我在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;}
工作演示