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>

主要列表显示给用户。当用户悬停而更多列表项时。他看到更多列表的下拉列表。当用户点击更多列表中的列表项时。它应该替换主列表中的第三个孩子，第三个项目将被添加到#more列表。

我感谢任何帮助。

Answer 1

这应该这样做：

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

对于悬停，请查看http://api.jquery.com/hover/

Answer 2

$('#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 3

这是工作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);
});

}）

Answer 4

<强> 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/

编辑：我将click更改为上面live并删除了一些不必要的代码。

如何使用jquery删除子元素

4 个答案: