jqueryを使用して子要素を削除する方法

Question

私はリストを持っています。

<ul id="main"> 
    <li><a href="#">Blah ...</a></li> 
    <li><a href="#">Blah ...</a></li> 
    <li><a href="#">Blah ...</a></li> 
    <li id="more">More 
     <ul> 
     <li><a href="#">Blah ...</a></li> 
     <li><a href="#">........</a></li> 
     <li><a href="#">........</a></li>  
     </ul> 
    </li> 
</ul> 

メインリストはユーザーに表示されます。ユーザーがより以上の場合は、リスト項目はです。彼はの一覧をと表示しています。ユーザがのリストアイテムをクリックすると、が表示されます。 第3子メインリストおよび第3アイテムが#moreリストに追加されます。

何か助けていただきありがとうございます。

Answer 1

CSS

#more ul { display: none; } 

Javascriptを

$('#more').hover(function() { $('ul', this).show(); }, 
       function() { $('ul', this).hide(); }); 

$('#more li a').live('click', function() {  
    $(this).before($('#main > li:last-child').prev()); 
    $('#main > li:last-child').before(this); 
}); 

の作業例：http://jsfiddle.net/FishBasketGordo/BAJXB/

EDIT：私は上記のliveにclickを変更し、いくつかの不要なコードを削除しました。

Answer 2

これはそれを行う必要があります。

ホバリング用

$('#more li').click(function() { 
    $('#main li').eq(2).replaceWith(this).appendTo('#more'); 
}); 

が、ここでhttp://api.jquery.com/hover/

Answer 3

$('#more').hover(function(){$('#more ul').show();}, function(){$('#more ul').hide();}); 

$('#more li').click(function(){ 
    var thirdChild = $('#main li:eq(2)'); 
    thirdChild.replaceWith(this).appendTo('#more'); 
}); 

Answer 4

を見て作業しているdemo

$(function(){ 

$('#more').hover(function(){ 
    $('#more ul').show(); 
}, function(){ 
    $('#more ul').hide(); 
}); 

$('#more li').click(function() { 
    $('#more ul').append($('#main > li').eq(2)) 
    $('#more').before(this); 
}); 

}）