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

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

我的解决方案（而不是尝试选择顶级LI，我使 成为必要的效果）。

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

Answer 2

我不知道它将如何帮助您从中创建阴影。但我可以告诉你为什么你会收到一份拥抱副本。

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

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

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

演示

Answer 3

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

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

这应该会给你一个没有任何子列表的新列表，你可以将其附加到 DOM 中你想要的位置。我还没有测试过它，所以可能需要一些调整，但这个想法应该可行。