javascript - 更改 slideToggle 上的列表样式图像？

Question

HTML

<ul class="main">
    <li class="item_no">Item 1
        <ul class="sub_items">
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3</li>
        </ul>
    </li>
    <li class="item_no">Item 2
        <ul class="sub_items">
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
        </ul>
    </li>
    <li class="item_no">Item 3</li>
</ul>

CSS

ul.main {
    list-style-type:none;
}
ul.main li.item_no {
    list-style-image:url('arrow.png');
}
ul.main ul.sub_items li {
    list-style-image:none;
}

脚本

$(document).ready(function() {
    $('ul.sub_items').hide().filter(':lt(1)').show();

    $("li.item_no").click(function() {
        $(this).find(".sub_items").slideToggle("slow");
    });
});

当我点击“item_no”时，我想将 list-style-image 从“arrow.png”更改为“arrowdown.png”。

有人知道怎么做吗？？？

Answer 1

试试这个:

$(document).ready(function () {
    $('.sub_items').hide().first().show();
    $(".main > li").click(function () {
        var self = $(this);
        self.toggleClass('item_no item_down');
        self.children('.sub_items').slideToggle('slow');
    });
});

添加此 CSS:

ul.main li.item_down{
     list-style-image:url('arrowdown.png');
}

Working Fiddle