javascript - Jquery 在触发器中切换跨度文本

Question

我想我已经快要弄清楚这一点了。我是 JavaScript 新手，但这是我的情况。

我默认隐藏了一些列表。单击标题将显示列表。我希望标题中的跨度从“+”更改为“-”以分别隐藏和显示。

我遇到的问题是两个标题的跨度更改，而不仅仅是单击的标题。

    <div>
    <h3 class = "trigger"><span>+</span>Heading 1</h3>
    <ul class = "toggle">
        <li>Line One</li>
        <li>Line Two</li>
        <li>Line Three</li>
    </ul>
</div>
<div>
    <h3 class = "trigger"><span>+</span>Heading 2</h3>
    <ul class = "toggle">
        <li>Line One</li>
        <li>Line Two</li>
        <li>Line Three</li>
    </ul>
</div>

这里是它附带的 javascript。

$(".trigger").click(function(){
    $(this).next(".toggle").slideToggle(function(){
    $('span').text(
        $('.toggle').is(':visible') ? '-' : '+');
    });
});

这是一个jsfiddle

Answer 1

试试这个:

$(".trigger").click(function(){
    var trigger = $(this);
    $(this).next(".toggle").slideToggle(function(){
    trigger.children('span').text(
        $('.toggle').is(':visible') ? '-' : '+');
    });
});

​