在手风琴 menu.js 文件中放置图标而不是“+”或“-”答案

【问题标题】：Putting icon instead of " + " or " - " in an accordian menu.js file在手风琴 menu.js 文件中放置图标而不是“+”或“-”
【发布时间】：2013-05-27 12:56:17
【问题描述】：

我正在制作手风琴菜单。
我刚找到这个链接http://jsfiddle.net/zM5Vj/，它和我制作的手风琴菜单几乎相似。
在代码中，哪里有

if($(this).text() == "-")  
{
  $(this).text("+");
  }
  else {
  $('#accordion .opener').text("+");
  $(this).text("-");
   }
 });

如果插入“+”和“-”，我想放置图标“~/Image/iconplus.gif”和“~/Image/iconminus.gif”。我该怎么做？
我试过了

<img src="..."/>

但还是没用。
请问有人可以帮忙吗？
提前致谢。

【问题讨论】：

我想没有办法单独使用 jquery，我们还需要 css。

标签： jquery asp.net-mvc asp.net-mvc-2 jquery-ui-accordion

【解决方案1】：

$(this).text() 允许您为元素指定纯文本内容。要附加图片，请使用$(this).append($(<img src='plus.gif'))。

另外，不要使用$(this).text() == '-' 来查看菜单是否已展开，而是将一个类附加到<a> 元素。

比如我们可以用.addClass('expand')表示菜单已经展开，然后.hasClass('expand')判断菜单是否展开，最后'.removeClass('expand')表示菜单不再展开）。

这里是一个例子，使用虚拟图像来说明：

JSFiddle

$(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');
        }
    });
});

【讨论】：

【解决方案2】：

感谢大家的回复并帮助我解决问题。
@Simon Adcock，您的回答给了我一种思考解决方案的新方法。
但是，我也找到了 1 行解决方案。
我刚刚将这一行添加到我的 .js 文件中

 $(this).append($('<img src="../Images/imageplus.gif"/>'))

所以，最后回答是：

if (x == "block") {
        $(this).text('');
        $(this).append($('<img src="../Images/imageplus.gif"/>'))
        $(this).append(' ' + valueText);
    }
    else {
        $(this).text('');
        $(this).append($('<img src="../Images/imageminus.gif"/>'))
        $(this).append(' ' + valueText);
    }

【讨论】：