我正在制作手风琴菜单。
我刚刚找到这个链接http://jsfiddle.net/zM5Vj/ http://jsfiddle.net/zM5Vj/,和我做的手风琴菜单几乎相似。
代码中,有
if($(this).text() == "-")
{
$(this).text("+");
}
else {
$('#accordion .opener').text("+");
$(this).text("-");
}
});
如果插入“+”和“-”,我想放置图标“~/Image/icon plus.gif”和“~/Image/icon minus.gif”。我该怎么做?
我努力了
<img src="..."/>
但仍然没有什么用。
请问有人可以帮忙吗?
提前致谢。
$(this).text()
允许您为元素指定纯文本内容。要附加图像,请使用$(this).append($(<img src='plus.gif'))
.
另外,不要使用$(this).text() == '-'
要查看菜单是否已展开,请将一个类附加到<a>
元素。
例如,我们可以使用.addClass('expand')
表示菜单已展开,然后.hasClass('expand')
检查菜单是否已展开,最后'.removeClass('expand')
表示菜单不再展开)。
这是一个示例,使用虚拟图像来说明:
JSFiddle http://jsfiddle.net/SiCurious/zM5Vj/24/
$(function(){
//starter plus image
var startPlus = $('<img>').attr('src','http://findicons.com/files/icons/1688/web_blog/48/add.png')
.css({'height': '20px', 'width': '20px'});
$('#accordion .fullChild>a.opener').addClass('box')
.append(startPlus);
$('#accordion .opener').click(function() {
//images for click event handler
var plusImg = $('<img>').attr('src','http://findicons.com/files/icons/1688/web_blog/48/add.png')
.css({'height': '20px', 'width': '20px'});
var minusImg = $('<img>').attr('src','http://findicons.com/files/icons/2083/go_green_web/64/subtract.png')
.css({'height': '10px', 'width': '10px'});
if($(this).hasClass('expand')) {
$(this).empty()
.append(plusImg)
.removeClass('expand');
} else {
$(this).empty()
.append(minusImg)
.addClass('expand');
}
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)