我的HTML如下:
<div id="line1"> <a>down</a> </div>
<div id="line2"> <a>up</a> <a>down</a> </div>
<div id="line3"> <a>up</a> <a>down</a> </div>
<div id="line4"> <a>up</a> <a>down</a> </div>
<div id="line5"> <a>up</a> </div>
当我点击向上或向下链接时，我希望div分别交换。
我不是在寻找拖放功能
为你的上行/下行链接添加类:
<div id="menu">
<div id="line1"> A <a class='up'>up</a> <a class='down'>down</a></div>
<div id="line2"> B <a class='up'>up</a> <a class='down'>down</a></div>
<div id="line3"> C <a class='up'>up</a> <a class='down'>down</a></div>
<div id="line4"> D <a class='up'>up</a> <a class='down'>down</a></div>
<div id="line5"> E <a class='up'>up</a> <a class='down'>down</a></div>
</div>
添加CSS隐藏未使用的第一个和最后一个链接:
#menu > div:first-child a:first-child,
#menu > div:last-child a:last-child { display: none; }
$('#menu').on('click', 'a', function() {
var divs = $('#menu > div');
var p = $(this).parent();
var pos = p.index();
if($(this).hasClass('up')) {
p.insertBefore(divs.eq(--pos));
}
else if($(this).hasClass('down')) {
p.insertAfter(divs.eq(++pos));
}
});