使用本地存储或会话存储保持折叠项-1类显示/不显示

Question

我对在刷新、打开或关闭后保留我的callapse项目有问题。我使用引导5。要查看手风琴项目查看，需要在类中添加show。

<div role="tabpanel" data-bs-parent="#accordion-1" class="accordion-collapse collapse show item-1" id="1">

我的html代码：

<div id="row" class="row gaps">
    <div id="col-3" class="col-lg-3">
        <div role="tablist" class="accordion" id="accordion-1">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;">1th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-1" class="accordion-collapse collapse show item-1" id="1">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text</span></div>
                </div>
            </div>
        </div>
        <div role="tablist" class="accordion" id="accordion-4">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-4 .item-1" aria-expanded="true" aria-controls="accordion-4 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;">  2th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-4" class="accordion-collapse collapse show item-1 show" id="2">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text 2</span>
                        <div class="d-grid gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="col-3" class="col-lg-3">
        <div role="tablist" class="accordion" id="accordion-2">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-2 .item-1" aria-expanded="true" aria-controls="accordion-2 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;">3 th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-2" class="accordion-collapse collapse show item-1" id="3">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text 3</span>
                        <div class="d-grid gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
        <div role="tablist" class="accordion" id="accordion-3">
            <div class="accordion-item visible">
                <h2 role="tab" class="accordion-header mb-0"><button data-bs-toggle="collapse" data-bs-target="#accordion-3 .item-1" aria-expanded="true" aria-controls="accordion-3 .item-1" class="accordion-button" style="font-family: Alata, sans-serif;"> 4th</button></h2>
                <div role="tabpanel" data-bs-parent="#accordion-3" class="accordion-collapse collapse show item-1" id="4">
                    <div class="accordion-body"><span style="font-family: Alata, sans-serif;font-size: 22px;"> random text 4</span>
                        <div class="d-grid gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

然后我按下4th按钮，例如我可以隐藏它。从视觉上看就是这样。

​

所以我也想在刷新页面之后保存它。

我试着

<script>
    // Open/close the collapse panels based on history
    var storage  = $.localStorage;

    $('.collapse').on('hidden.bs.collapse', function () {
        storage.remove('open_' + this.id);
    });

    $('.collapse').on('shown.bs.collapse', function () {
        storage.set('open_' + this.id, true);
    });

    $('.collapse').each(function () {
        // Default close unless saved as open
        if (storage.get('open_' + this.id) == true) {
            $(this).collapse('show');
        }
    });
</script> 

但对我不起作用的。

请给我一些解决问题的建议好吗？

Answer 1

localStorage不是在jQuery中定义的，而是在Window中定义的，所以您应该将其访问为window.localStorage或只是localStorage，而不是$.localStorage。