0

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/

4

3 に答える 3

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);
//]]>
于 2012-10-27T03:57:15.843 に答える
3

テストを使用してhasClass、シンボルを適切な値に変更できます。

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

デモ: http://jsfiddle.net/2RJ5V/

于 2012-10-27T03:58:41.927 に答える
1

あなたは物事を複雑にしすぎていると思います。スパンをhtmlに追加すると、いくつかのコードを取り除くことができます。

<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-27T04:02:33.773 に答える