改变加号减号倒塌时

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

这里是我的小提琴http://jsfiddle.net/nwbY7/28/

来源

2012-10-27 Francis Alvin Tan

修改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); 
//]]>

来源

2012-10-27 03:57:15 Tariqulazam

+1简单的解决方案 –

感谢@Tariqulazam，伟大工程 –

可以使用hasClass测试改变符号到适当的值：

$(this).text($(this).hasClass("CatExpanded") ? "[-]" : "[+]");

演示：http://jsfiddle.net/2RJ5V/

来源

2012-10-27 03:58:41 McGarnagle

是什么你之间的区别和其他答案 –

也谢谢@dbaseman，你的代码为我工作 –

我觉得你太复杂了。如果你在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') ? '[+]' : '[&ndash;]'); 
    $ul.slideToggle(); 
});

演示：http://jsfiddle.net/elclanrs/nwbY7/34/

来源

2012-10-27 04:02:33 elclanrs

酷，有点短的代码，也谢谢@elclanrs –

改变加号减号倒塌时

回答

相关问题