更改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”時，我想將列表樣式圖像從“ 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');
}

工作小提琴

Answer 2

試試這個演示

 $("#ul_lst").hide(); $("#img_up").hide(); $("#arrow_up").hide(); $("#link1").click(function () { $(".exclass").slideToggle(1000); $("#arrow_up").toggle(); $("#arrow_dw").toggle(); $("#img_up").toggle(); $("#img_down").toggle(); }); 

 .demomenu { width: 220px; padding: 0 0 0 0; margin-bottom: 1em; font-weight: normal; font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; color: #333; } .linkclass { display: inline-block; padding: 3px 0px 3px 0.5em; border-left: 5px solid #8AA1B6; border-right: 5px solid #8AA1B6; background-color: #6898d0; color: #fff; text-decoration: none; width: auto; } .exclass { width: 220px; padding: 0 0 0 0; font-size: 11px; font-weight: normal; font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #e5eecc; color: 000000; } .lst_sty{ list-style:none; } .img_up { background:url('http://i.imgur.com/fpwRSGA.png'); display:inline-block; } .img_down { background:url('http://i.imgur.com/WmtRYL9.png'); display:inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <ul class="exclass" id="ul_lst"><li class="lst_sty">This is sliding text example! This is sliding text example! </li> <li class="lst_sty">This is sliding text example! This is sliding text example! </li> <li class="lst_sty">This is sliding text example! This is sliding text example! This is sliding text example! </li> <li class="lst_sty">This is sliding text example!</li></ul> <div class="demomenu"> <a class="linkclass" id="link1" href="#">Products </a><span class="arrow_up" id="arrow_up">></span><span class="arrow_dw" id="arrow_dw"><</span> <img class="img_up" id="img_up" height="24" width="24" > <img class="img_down" id="img_down" height="24" width="24" > </div>