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”。
有谁知道怎么做???
答案 0 :(得分:0)
试试这个:
$(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 强>
答案 1 :(得分:0)
试试这个demo
$("#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>