HTML
<div style="border:1px solid red;width:200px;">
<div class="wpsc_categorisation_group">
<ul class="wpsc_categories wpsc_top_level_categories">
<li><a href="link">main link 1</a>
<ul class="wpsc_second_level_categories">
<li><a>test 1</a></li>
<li><a>test 2</a></li>
<li><a>test 3</a></li>
</ul>
</li>
</ul>
<div class="clear_category_group"></div>
</div>
<div class="wpsc_categorisation_group">
<ul class="wpsc_categories wpsc_top_level_categories">
<li><a href="link2">main link 2</a>
<ul class="wpsc_second_level_categories">
<li><a>test 1</a></li>
<li><a>test 2</a></li>
<li><a>test 3</a></li>
</ul>
</li>
</ul>
<div class="clear_category_group"></div>
</div>
</div>
CSS
span.CatExpander {float:right;cursor:pointer;}
.wpsc_second_level_categories {display:none;}
的jQuery
//<![CDATA[
(function($)
{
$(document).ready(function()
{
$(".wpsc_top_level_categories > li:has(ul)").prepend("<span class=\"CatExpander\">[+]</span>");
$(".CatExpander").click(function()
{
$(this).toggleClass("CatExpanded").siblings("ul").slideToggle(500);
return false;
}).eq(0).addClass("CatExpanded").end().slice(1).siblings("ul").hide();
});
})(jQuery);
//]]>
我的问题是如何在折叠时将加号更改为减号,我使用手风琴式jquery
答案 0 :(得分:3)
修改您的jquery代码以添加此行
$(this).html($(this).html()=="[+]"?"[-]":"[+]");
这是完整的功能
//<![CDATA[
(function($)
{
$(document).ready(function()
{
$(".wpsc_top_level_categories > li:has(ul)").prepend("<span class=\"CatExpander\">[+]</span>");
$(".CatExpander").click(function()
{
$(this).html($(this).html()=="[+]"?"[-]":"[+]");
$(this).toggleClass("CatExpanded").siblings("ul").slideToggle(500);
return false;
}).eq(0).addClass("CatExpanded").end().slice(1).siblings("ul").hide();
});
})(jQuery);
//]]>
答案 1 :(得分:3)
您可以使用hasClass
测试将符号更改为适当的值:
$(this).text($(this).hasClass("CatExpanded") ? "[-]" : "[+]");
答案 2 :(得分:1)
我认为你太复杂了。如果你在html中添加span,你可以删除一些代码。
<li><a href="link">main link 1</a><span>[+]</span>
然后您可以将JavaScript简化为:
$('.wpsc_categories span').click(function(){
var $ul = $(this).next();
$(this).html( $ul.is(':visible') ? '[+]' : '[–]');
$ul.slideToggle();
});