Помещение значка вместо + или - в аккордеонном файле menu.js

Я делаю аккордеонное меню.
Я только что нашел эту ссылку http://jsfiddle.net/zM5Vj/ , и это почти похоже на меню-аккордеон, которое я сделал.
В коде, где есть

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

Если вместо «+» и «-», я хочу поставить значки «~/Image/iconplus.gif» и «~/Image/iconminus.gif». Как мне это сделать?
Я пытался

<img src="..."/>

Но все равно это бесполезно.
Пожалуйста, кто-нибудь может помочь?
Заранее спасибо.


jquery asp.net-mvc asp.net-mvc-2 jquery-ui-accordion
person Novice    schedule 27.05.2013    source источник
comment
Я думаю, что нет возможности сделать это, используя только jquery, нам также нужен css.   -  person Novice    schedule 28.05.2013

Ответы (2)


arrow_upward
3
arrow_downward

$(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');
        }
    });
});
person Simon Adcock    schedule 02.06.2013

arrow_upward
1
arrow_downward

Спасибо всем за ответы и помощь в решении этой проблемы.
@Simon Adcock, ваш ответ дал мне новый взгляд на решение.
Однако я также нашел для него однострочное решение.
Я только что добавил эту строку в свой файл .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);
    }
person Novice    schedule 07.06.2013