Question

我是jQuery和javascript的新手，我正在尝试通过手风琴来完成常见问题解答页面。我通过改变为列表编写的一些代码来使手风琴部分工作，使其使用标题和嵌套的div来运行。基本上，在页面加载时，顶部答案是可见的，当用户单击问题时，可见div关闭并显示相应的答案div。

我已经挂断了，试图添加+和 - 指标。我在每个标题中添加了空字符标记，其中包含toggleIndicator和up / down类。在我的脚本中，我使用了toggleClass来更改为down，反之亦然，具体取决于用户的操作。所有这一切都很好。我希望做的是然后使用.text在点击后添加一个+或 - 到跨度中，但到目前为止，无论跨度是上升还是下降，都只能显示+。这是我的HTML：

<div id="celebs">
<div>

    <h3>Question 1<span class="toggleIndicator down"></span></h3>
    <div>
        <p>I’m part of the answer.<br>
        And so am I!</p>
    </div>

    <h3>Question 2<span class="toggleIndicator up"></span></h3>
    <div>
        <p>I’m part of the answer.<br>
        And so am I!</p>
    </div>

    <h3>Question 3<span class="toggleIndicator up"></span></h3>
    <div>
        <p>I’m part of the answer.<br>
        And so am I!</p>
    </div>

</div>

这是我一直在使用的jQuery：

$(document).ready(function () {
    function indicatorSwitch() {
        $('#celebs .down').text('-');
        if ($('#celebs h3 > span').hasClass('up')) {
            $('#celebs h3 > span').text('+')
        } else if ($('#celebs h3 > span').hasClass('down')) {
            $('#celebs h3 > span').text('-')
        }
    };
    $('#celebs div > div')
        .click(function (e) {
        e.stopProgation();
    });
    $('#celebs div div')
        .filter(':not(:first)')
        .hide();
    $('#celebs div h3').click(function () {
        var selfClick = $(this).next('div').is(':visible');
        if (!selfClick) {
            $(this)
                .parent()
                .find('> div:visible')
                .slideToggle('fast');
        }
        $(this)
            .next('div')
            .slideToggle('fast');

        $(this).parent().find('span').toggleClass('up down');

        indicatorSwitch();
    });
});

任何人都可以指出我在哪里出错了吗？非常感谢。

无法更改jQuery手风琴中的文本指示器

0 个答案: