Putting icon instead of “ + ” or “ - ” in an accordian menu.js file

怎甘沉沦 提交于 2019-12-20 06:05:15

问题


I am making an accordian menu.
I just found this link http://jsfiddle.net/zM5Vj/ , and it is almost similar to the accordian menu I have made.
In the code, where there is

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

If insted of "+" and "-", i want to put icons "~/Image/iconplus.gif" and "~/Image/iconminus.gif". How do i do so?
I have tried

<img src="..."/>

But still it is of no use.
Please can anyone help?
Thanks in advance.


回答1:


$(this).text() allows you to specify plain text content for an element. To attach an image, use $(this).append($(<img src='plus.gif')).

Also, instead of using $(this).text() == '-' to see if the menu has been expanded, attach a class to the <a> element.

For example, we can use .addClass('expand') to indicate that the menu has expanded, and then .hasClass('expand') to check whether the menu has expanded, and finally '.removeClass('expand') to indicate that the menu is no longer expanded).

Here's an example, using dummy images to illustrate:

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:


Thank You All for responding and helping me in solving it.
@Simon Adcock, Your answer gave me a new way to think about the solution.
However, i also found a 1 line solution to it.
I just added this line to my .js file

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

So, answer finally it is :

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);
    }


来源:https://stackoverflow.com/questions/16773724/putting-icon-instead-of-or-in-an-accordian-menu-js-file

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!