jQuery clone () для имитации эффекта тени на IE7?(Или идеи получше)? - PullRequest
Новая
       9

jQuery clone () для имитации эффекта тени на IE7?(Или идеи получше)?

0 голосов
/ 21 января 2012

Может кто-нибудь помочь мне с функцией jquery clone()?

Есть ли способ дублировать список (но только верхний уровень li s) и добавить его к себе.Я хочу, чтобы это выглядело как тень реального списка, потому что 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');

но это дает огромную копию.

Ответы [ 3 ]

0 голосов
/ 21 января 2012

Я бы сказал, сначала клонировать ваш текущий список, а затем удалить подсписки 

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

Это должно дать вам новый список без каких-либо подсписков, которые вы можете добавить в DOM, где вы хотите. Я не тестировал его, поэтому, возможно, понадобятся некоторые настройки, но идея должна сработать.

0 голосов
/ 21 января 2012

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

Мое решение (вместо того, чтобы выбирать ЛИ верхнего уровня, я делаю <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; }
0 голосов
/ 21 января 2012

Я не знаю, как это поможет вам создать из него тень.Но я могу сказать, почему вы получаете копию обнимашки.Селектор

ul li выберет все элементы li в ul, клонирует каждый из них и добавит в ul li, что снова выделит все элементы li в ul.

Вы можете попробовать этот код для клонирования только предметов верхнего уровня. 

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

Демо

...