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上失去造型

1 个答案: