javascript - 使用显示/隐藏时 div 样式/格式丢失

Question

我正在使用下面的显示/隐藏代码。我工作正常购买文本格式正在丢失。无论如何要防止这种情况？我有一些标记样式和样式表编码

    <div id="fillit"></div>

    <a href="javascript:void(0)" class="para">Sci Lit 1</a>
    <div class="details">text for sci lit 1</div> 
    <a href="javascript:void(0)" class="para">Sci Lit 2</a>
    <div class="details">text for sci lit 2</div>    
    <a href="javascript:void(0)" class="para">Sci Lit 3</a>
    <div class="details">text for sci lit 3</div>   

<style>
.inner-boxes .box3, .details1 {display:none;}
</style>
<script>
$(function(){
    $(".para").click(function(){
        $("#fillit").text($(this).next(".details1").text()); 
    });
    $(".details1:first").clone().appendTo("#fillit").show();    
});
</script>

Answer 1

使用 .html() 而不是 .text()

改变:

$("#fillit").text($(this).next(".details1").text());

到:

$("#fillit").html($(this).next(".details1").html());

这是一个 example