<div class="box"> <div class="a f">111111</div> <div class="a-box"> <div class="b d">111111</div> <div class="b">222222</div> <div class="b">333333</div> </div> </div>
.box { width: 100px; } .a, .b { width: 200px; height: 30px; background: red; /*border: 1px solid #000;*/ } .a.f:after { content: url(x-.g.png); width: 10px; height: 10px; display: inline-block; } .a-box { display: none; } .a:after { content: url(d-g.png); width: 10px; height: 10px; display: inline-block; } /*.b:after { content: url(x-.g.png); 10px; height: 10px; display: inline-block; }*/ .d { display: none; }
$(function() { $('.box').on('mouseenter', function() { $('.a-box').css('display', 'block'); $(".a").removeClass('f'); }) $('.box').on('mouseleave', function() { $('.a-box').css('display', 'none'); $(".a").addClass('f'); }) $('.box').on('click', '.a', function() { $('.a-box').css('display', 'none'); $(".a").addClass('f'); }) $('.a-box').on('click', '.b', function() { $('.d').removeClass('d'); $(this).addClass('d'); $('.a').remove(); $('.box').prepend($(this).clone().attr('class', 'a f')); $('.a-box').css('display', 'none'); }) })
类名为了方便随便命名的,当然开发过程中不允许这样命名,为了大家看的明白一些