Question

好的，所以我有一部可用的手风琴，可以看到here

这是我的javascript

$(document).ready(function ($) {
    $('#accordion').find('.accordion-toggle').click(function () {

        //Expand
        $(this).next().slideDown('fast');
        $(this).children(".plusminus").text('-');

        //hide other panels
        $(".accordion-content").not($(this).next()).slideUp('fast');

    });
});

显然在那里我需要的东西是：

            $(this).next().slideUp('fast');
            $(this).children(".plusminus").text('+');

使内容框关闭，然后 - 变回+符号，但我不知道如何做到这一点。有什么帮助吗？

Answer 1

使用选择器有几种方法可以做到这一点，我不完全确定什么是最有效的，但你可以做的一种方法是抓住父，选择它的兄弟，并找到指标。然后设置它很容易。以下是使用现有代码的方法：

demo

$(document).ready(function ($) {
    $('#accordion').find('.accordion-toggle').click(function () {

        //Expand
        $(this).next().slideDown('fast');
        $(this).parent().siblings().find(".plusminus").text('+');
        $(this).children(".plusminus").text('-');

        //hide other panels
        $(".accordion-content").not($(this).next()).slideUp('fast');

    });
});

编辑：

一个更受欢迎的方法（至少在我看来）是使用带有伪元素的类。

demo

$(document).ready(function ($) {
    $('#accordion').find('.accordion-toggle').click(function () {

        //Expand
        $(this).next().slideDown('fast');
        $(this)
          .closest('.accordion-wrap').addClass('active')
          .siblings().removeClass('active');

        //hide other panels
        $(".accordion-content").not($(this).next()).slideUp('fast');

    });
});

然后有一个类似的课程

.accordion-wrap .accordion-toggle::after {
    content:'\000a0-';
}
.accordion-wrap.active .accordion-toggle::after {
    content:'\000a0+';
}

手风琴加减

1 个答案: