改變加號減號倒塌時

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 –

改變加號減號倒塌時

回答

相關問題