手风琴不会自动计数

Question

我的手风琴没有自动计数，不知道为什么一直是 1。我在 7.7.2 版上使用名为 Umbraco 的 CMS。

这是我的代码：

@if(@Model.Content.GetPropertyValue("titleAccordeon") != "")
{
  <section class="block block__accordion">
    <div class="container">
        <div class="row">
            <div class="block__heading col-md-12">
                <h3>@Model.Content.GetPropertyValue("titleAccordeon")</h3>
                <p>@Model.Content.GetPropertyValue("introAccordeon")</p>
            </div>
            @if(Model.Content.Accordion != null && Model.Content.Accordion.Any())
            {
                foreach (var item in Model.Content.Accordion)
                {
                    var guid = Guid.NewGuid();
                    <div class="accordion panel-group col-md-12" role="tablist" aria-multiselectable="true">
                        <div class="accordion__item">
                            <a class="accordion__item__header" role="button" data-toggle="collapse" data-target="#accordion-@guid" aria-expanded="false" aria-controls="accordion-@guid">
                                 @item.Title
                            </a>

                            <div class="collapse" id="accordion-@guid">
                                <div class="accordion__item__body">
                                    @item.Description
                                </div>
                            </div>
                        </div>
                    </div>
                }
            }
        </div>
    </div>
</section>

这是其中一页的结果：

由于 guid，所有手风琴都有不同的控件 ID。知道为什么它不算数吗？

Answer 1

如何自动编号？我没有看到 OL 或任何可以自动编号的东西。好像这个数字只是 item.Title 的一部分？如果是这种情况，你可以这样做。

@if(Model.Content.Accordion != null && Model.Content.Accordion.Any())
{
    var counter == 1;
    foreach (var item in Model.Content.Accordion)
    {
        var guid = Guid.NewGuid();

        <div class="accordion panel-group col-md-12" role="tablist" aria-multiselectable="true">
            <div class="accordion__item">
                <a class="accordion__item__header" role="button" data-toggle="collapse" data-target="#accordion-@guid" aria-expanded="false" aria-controls="accordion-@guid">
                         @(counter + ". " + @item.Title)
                </a>
                <div class="collapse" id="accordion-@guid">
                     <div class="accordion__item__body">
                        @item.Description
                    </div>
                </div>
            </div>
        </div>
        @counter++;
    }
}

Answer 2

我设法使代码正常工作。我将 div 中的一个移到 if 代码之外，它起作用了。不知道为什么 div 使手风琴计数。感谢 hardba11 和 ADyson 的帮助！

 <div class="accordion panel-group col-md-12" role="tablist" aria-multiselectable="true">
            @if(Model.Content.Accordion != null && Model.Content.Accordion.Any())
            {
                foreach (var item in Model.Content.Accordion)
                {

                    var guid = Guid.NewGuid();

                        <div class="accordion__item">
                            <a class="accordion__item__header" role="button" data-toggle="collapse" data-target="#accordion-@guid" aria-expanded="false" aria-controls="accordion-@guid">
                                     @item.Title
                            </a>
                            <div class="collapse" id="accordion-@guid">
                                 <div class="accordion__item__body">
                                    @item.Description

                                </div>
                            </div>
                        </div>
                }
            }
            </div>

手风琴不会自动计数

Accordion doesn't automatically count

count

umbraco

wai-aria

bootstrap-accordion