在幻灯片上更改列表样式图像切换

Change list-style-image on slideToggle?

本文关键字：样式 图像 列表 幻灯片      更新时间：2023-09-26

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"。

有谁知道该怎么做???

试试这个：

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

工作小提琴

试试这个演示

$("#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>

相关文章：