将加号或减号附加到 jQuery 手风琴

Question

对于一些关于样式的严格规则，我不应该使用 jquery ui css。鉴于此限制，我已经使用 jQuery-UI 成功实现了手风琴。这是我在 MVC Razor 中获得的项目列表的一部分。因此，手风琴的数量与项目的数量一样多（在我看来，我正在使用 foreach 循环）。这就是原因，我使用的是类名而不是标准的 'id=accordion'。

因此我的html：

<div class="accordion">
                        <h4><span class="panel-icon">+</span> Addresses</h4>
                        <div>
                            <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
                        </div>
</div>

和脚本：

<script>

    $(function () {
        $(".accordion").accordion({
            collapsible: true,
            active: false
        });


</script>

关键是将 ' 文本切换为 '-' 或 '+' 视情况而定。我怎样才能做到这一点？

Answer 1

您可以在函数中传递如下图标。如果手风琴关闭，则在 header 属性中传递为加号图标 css。再次打开它，然后在 css activeheader 属性中传递减号图标

$(function () {
  icons = {
      header: "ui-icon-circle-arrow-plus",
      activeHeader: "ui-icon-circle-arrow-minus"
    };

        $(".accordion").accordion({
            collapsible: true,
            active: false,
        icons: icons
        });
});