使用显示/隐藏时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样式/格式丢失

回答

相关问题