jQuery clone（）模拟IE7上的阴影效果？ （或更好的想法）？

Question

有人可以帮我解决jquery的clone()功能吗？

有没有办法复制列表（但只有顶级li）并将其附加到自身。我想让它看起来像实际列表的阴影，因为IE7不支持阴影。我确实尝试了一些插件，但没有一个完美，所以我认为这可能是一个更好的方法。

例如。 我想生成以下的克隆但只有顶级

 <ul>
   <li>home</li>
   <li>about</li>
   <li>services
     <ul>
        <li>web</li>
        <li>grahpic</li>
     </ul>
   </li>
 <ul>

生成没有子级别的另一个列表。

 <ul>
   <li>home</li>
   <li>about</li>
   <li>services</li>
 <ul>

我试过

$('ul li').clone().appendTo('ul li');   

但它提供了一个巨大的副本。

Answer 1

我不知道它是如何帮助你创造一个阴影的。但我可以说你为什么要拥抱副本。

ul li选择器将选择li下的所有ul元素并克隆每个元素并附加到ul li，这将再次选择所有li元素在ul。

您可以尝试使用此代码仅克隆顶级项目。

$('ul:first > li').clone().each(function(){
    $(this).find('ul').remove(); 
}).appendTo('ul:first');

<强> Demo

Answer 2

我说首先克隆你当前的列表，然后删除子列表

var clonedList = $('ul').clone()
clonedList.find('li ul').remove();

这应该为您提供一个没有任何子列表的新列表，您可以将它附加到您想要的DOM。我还没有对它进行测试，因此可能需要进行一些调整，但这个想法应该可行。

Answer 3

http://jsfiddle.net/JUtkm/1/

我的解决方案（而不是尝试选择顶级LI，我需要<span>才能生效。）

HTML

<ul class="top">
   <li><span>home</span></li>
    <li><span>about</span></li>
    <li><span>services</span>
     <ul>
         <li>web</li>
        <li>grahpic</li>
     </ul>
   </li>
 <ul>

的jQuery

$('ul>li').each(function(i, e){
    var cloned = $(e).find('span').clone();
    $(e).append( cloned.addClass('li-shadow') );
});

CSS

ul.top {position: relative;}
li {position: relative;}
li span {position: relative; z-index: 10; display: block; }
.li-shadow { color: rgb(130,130,130); position: absolute; top: 1px; left: 1px; z-index: 5; }