在动态 jquery 移动面板的可折叠 div 上丢失样式

Question

我要打开一个新页面，方法是单击将数据附加到外部面板内的可折叠 div 的列表项。我第一次打开它时，样式保留在可折叠 div 上，但如果我返回并尝试打开另一个项目，样式消失但数据在那里。我觉得我已经通过添加创建、刷新、增强等方法尝试了所有方法，但没有成功。有什么想法吗？？

Java 脚本：

$(document).on('click', '#results li ', function(){  
$("#barHours").empty();
$("#barHours").append('<h3>Hours: </h3>');
$("#barHours").append('Monday: ' + ($(this).data('monday-hours')) + '<br>');
$("#barHours").append('Tuesday: ' + ($(this).data('tuesday-hours')) + '<br>');
$("#barHours").append('Wednesday: ' + ($(this).data('wednesday-hours')) + '<br>');
$("#barHours").append('Thursday: ' + ($(this).data('thursday-hours')) + '<br>');
$("#barHours").append('Friday: ' + ($(this).data('friday-hours')) + '<br>');
$("#barHours").append('Saturday: ' + ($(this).data('saturday-hours')) + '<br>');
});

HTML

<div data-role="panel" id="panel" data-position="right" data-display="overlay" data-theme="b">
        <div data-role="content">
            <div data-role="collapsible" data-inset="true" id="barHours">
            </div>
        </div>
    </div>

Answer 1

一个简单的方法是在更新可折叠之前调用 destroy 方法，然后在最后重新初始化它：

    $("#barHours").collapsible( "destroy" ); //destroy the widget
    $("#barHours").empty();
    $("#barHours").append('<h3>Hours: </h3>');
    $("#barHours").append('Monday: 8-5<br>');
    $("#barHours").append('Tuesday: 8-5<br>');
    $("#barHours").append('Wednesday: 8-5<br>');
    $("#barHours").append('Thursday:8-5 <br>');
    $("#barHours").append('Friday: 8-5<br>');
    $("#barHours").append('Saturday: 10-10<br>');

    $("#barHours").collapsible(); //reinitialize the widget

在动态 jquery 移动面板的可折叠 div 上丢失样式

Losing styling on dynamic jquery mobile panel's collapsible div

panel

collapsable

jquery-mobile

jquery-mobile-collapsible