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

Question

对于一些关于风格的严格规定，我不应该使用jquery ui css。考虑到这个限制，我已经使用 jQuery-UI 成功地实现了手风琴。这是我在 MVC Razor 中获得的项目列表的一部分。因此，手风琴的数量与项目的数量一样多（在我看来，我正在使用 foreach 循环）。这就是原因，我使用 class 名称而不是 '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>

重点是根据情况切换 's text to '-' 或 '+'。我怎样才能做到这一点？

Answer 1

你可以在你的 function.If 中传递如下图标它手风琴关闭然后作为加号图标传递 css 在 header properties.Again 它打开然后传递减号图标在 css activeheader 属性

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

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

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

Append Plus or Minus to jQuery Accordion

jquery

jquery-ui

jquery-ui-accordion