Javascript 是否更改幻灯片切换上的列表样式图像？

Html

剧本

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

当我单击“item_no”时，我想将列表样式图像从“arrow.png”更改为“arrow down.png”

有人知道怎么做吗？

试试这个：

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

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

添加以下CSS：

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

试试这个

$（“ul#lst”）.hide（）；
$（“#img_up”）.hide（）；
$（“向上箭头”）.hide（）；
$（“#link1”）。单击（函数（）{
$（“.exportss”）.slideToggle（1000）；
$（“向上箭头”）.toggle（）；
$（“#arrow_dw”）.toggle（）；
$（“#img_up”）.toggle（）；
$（“#img_down”）.toggle（）；
});
.demo菜单{
宽度：220px；
填充：0；
边缘底部：1米；
字体大小：正常；
字体系列：Verdana、Lucida、日内瓦、Helvetica、Arial、无衬线字体；
颜色：#333；
}
.linkclass{
显示：内联块；
填充：3px0px 3px0.5em；
左边框：5px实心#8AA1B6；
右边框：5px实心#8AA1B6；
背景色：#6898d0；
颜色：#fff；
文字装饰：无；
宽度：自动；
}
.感叹道
{
宽度：220px；
填充：0；
字体大小：11px；
字体大小：正常；
字体系列：Verdana、Lucida、日内瓦、Helvetica、Arial、无衬线字体；
背景色：#e5eecc；
颜色：000000；
}
.lst_sty{
列表样式：无；
}
.img_up
{
背景：url（'http://i.imgur.com/fpwRSGA.png');
显示：内联块；
}
.img_下来
{
背景：url（'http://i.imgur.com/WmtRYL9.png');
显示：内联块；
}

这是一个滑动文本示例！这是一个滑动文本示例
这是一个滑动文本示例！这是一个滑动文本示例
这是一个滑动文本示例！这是一个滑动文本示例！这是一个滑动文本示例
这是一个滑动文本示例
>使用
箭头向下
图像再创建一个类，并在单击
项目编号
时将其切换。它不适用于第一个“项目编号”。首先“item_no”没有隐藏，然后它显示的是“arrow.png”而不是“arrowdown.png”。@AmarPawar在你提供的提琴中，我觉得效果不错。你能详细解释一下什么不起作用吗？第1项的子项不隐藏。所以项目1的列表样式图像应该是“arrowdown.png”。
$(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');
    });
});

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