主页 / coding / 问题 / 79077531
Accepted
user20408154
Asked: 2024-10-11 17:02:40 +0800 CST

在 ASP.NET Core 中页面重新加载时保留手风琴选择

  • 772

我正在使用 ASP.NET Core 7.0。

我在页面上有一个手风琴。最后一部分，当我添加评估时，我会加载一个模态表单。当单击“保存”按钮时，我会保存数据，关闭模态表单并重新加载页面，以便显示已保存的数据。

但是，当我重新加载页面时，手风琴折叠的第一部分被选中。我想关闭它并打开添加评估的部分。

以下是我尝试过的——我的手风琴：

<div class="accordion" id="accEditRecord">
    <div class="accordion-item">
         <h2 class="accordion-header" id="ahPatientDemographics">
             <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#apPatientDemographics" aria-expanded="true" aria-controls="apPatientDemographics">
                 <div class="col-md-9"><span>Patient Demographics </span></div>
                 <div class="col-md"><span class="align-items-end" id="spPatientDemographicsProgress"></span>/<span class="align-items-end" id="spPatientDemographicsQuestionCount"></span> Questions complete</div>
             </button>                                                        
         </h2>
         <div id="apPatientDemographics" class="accordion-collapse collapse show" aria-label="ahPatientDemographics" data-bs-parent="#accEditRecord" role="group">                                                                    
             <div class="accordion-body">
                 @{ await Html.RenderPartialAsync("_PatientDemographics"); }
             </div>
         </div>
     </div>
     <div class="accordion-item">
         <h2 class="accordion-header" data-id="ahPersonalHistory">
             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#apPersonalHistory" aria-expanded="false" aria-controls="apPersonalHistory">
                 <div class="col-md-9"><span>Personal History</span></div>
                 <div class="col-md"><span id="spPersonalHistoryProgress"></span>/<span id="spPersonalHistoryQuestionCount"></span> Questions complete</div>
             </button>
         </h2>
         <div id="apPersonalHistory" class="accordion-collapse collapse" aria-label="ahPersonalHistory" data-bs-parent="#accEditRecord" role="group">
             <div class="accordion-body">
                 @{ await Html.RenderPartialAsync("_PersonalHistory"); }
             </div>
         </div>
      </div>
      <div class="accordion-item">
          <h2 class="accordion-header" data-id="ahAssessmentResults">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#apAssessmentResults" aria-expanded="false" aria-controls="apAssessmentResults">
                  <div class="col-md-9"><span>Assessment Results</span></div>
                  <div class="col-md"><span id="spAssessmentResultsProgress"></span>/15 Questions complete</div>
              </button>
          </h2>
          <div id="apAssessmentResults" class="accordion-collapse collapse" aria-label="ahAssessmentResults" data-bs-parent="#accEditRecord" role="group">
              <div class="accordion-body">
                  @{ await Html.RenderPartialAsync("_AssessmentResults"); }
              </div>
          </div>
      </div>
 </div>

我的jQuery代码：

$(function () {
    var activeSection = sessionStorage.getItem('activeSection');
     if (activeSection) {
         //Cloase all sections
         $('.accordion').accordion("option", "active", -1);

         // Open the saved section
         $('h2[data-id="' + activeSection + '"]').next().slideDown();
     }

     //To set, which one will be opened
     $('.accordion-header').on('click', function () {
         
         let target = $(this).data('id');
         //Save data to sessionStorage
         sessionStorage.setItem('activeSection', target);
     });
});

我得到的错误是该.accordion函数不存在。我使用的是 jQuery v3.6.0

有人可以帮忙吗？

jquery

1 个回答

  1. Best Answer

    .accordion 函数是 Jquery UI 的函数，但看起来您正在使用bootstrap accordion，因此您应该直接使用 jquery 设置 bootstrap 类，然后它就会起作用。

    更多细节可以参考下面的js代码：

    <script>
    $(function () {
        var activeSection = sessionStorage.getItem('activeSection');

        if (activeSection) {
            // Close all accordion sections
            $('.accordion-collapse').removeClass('show');

            // Open the saved section
            $('#' + activeSection).addClass('show');
            $('button[data-bs-target="#' + activeSection + '"]').removeClass('collapsed').attr('aria-expanded', true);
        }

        // Set which one will be opened on click
        $('.accordion-header button').on('click', function () {
            let target = $(this).attr('data-bs-target').substring(1);
            // Save the target section ID to sessionStorage
            sessionStorage.setItem('activeSection', target);
        });
    });
</script>

    结果：

    在此处输入图片描述

    • 0

相关问题