使用顯示/隱藏時div樣式/格式丟失

我在下面使用了顯示/隱藏代碼。我工作得很好，購買文本格式正在丟失。無論如何要防止這種情況？我有一些標記的風格和樣式表編碼使用顯示/隱藏時div樣式/格式丟失

<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>

來源

2011-05-26 acctman

在你的腳本，你必須：

$(".para").click(function(){ 
    $("#fillit").text($(this).next(".details1").text()); 
});

更改爲：

$(".para").click(function(){ 
    $("#fillit") 
     .children(".details1") 
     .replaceWith(
      $(this).next(".details1").clone().show() 
     ); 
});

.text()只得到元素的內部文本

注意：因爲它有在評論中注意到，這不是唯一的方式，甚至可能不是最快的。（我自己也沒有做過任何測試）但是在我看來，這完全是關於風格。我的答案的優點是該解決方案可以在大量不同的情況下工作。

來源

2011-05-26 06:34:46

你並不需要在這裏做一個克隆或replaceWith，最終的結果就是從一個div中取出html並複製到顯示區域。一個簡單的.html（）將做到這一點。 – ryanmarc 2011-05-26 06:59:05

@ryanmarc是的，但是這個解決方案也可以滿足'＃fillit'中的其他元素，因此更加健壯。它仍然是一個有效的答案。不同之處在於編碼風格。我個人對'.html（）'http://api.jquery.com/html/'有問題。某些瀏覽器可能不會返回完全複製原始文檔中的HTML源代碼的HTML。'＃ – 2011-05-26 07:17:13

#fillit作爲空格開始.children（「.details1」）不會與任何內容匹配，所以這不是真正有效的答案。 – ryanmarc 2011-05-26 07:30:12

使用的.html（）代替的.text（）

變化：

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

到：

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

這裏是一個example

來源

2011-05-26 06:49:13 ryanmarc

非常感謝。我花了一個多小時試圖弄清楚發生了什麼事。認爲這是一個css衝突 – acctman 2011-05-26 07:02:48

太棒了，很高興你有它的工作。接受答案？ :) – ryanmarc 2011-05-26 07:11:19

使用顯示/隱藏時div樣式/格式丟失

回答

相關問題