动态添加和删除多个div [英] adding and removing multiple div dynamically
本文介绍了动态添加和删除多个div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有点卡住了.这就是它应该做的.当您将鼠标悬停在菜单项上时,它会滑出下一个菜单并添加一个新的垂直div,该垂直div在当前div和下一个div之间必须为5px宽,但是我无法添加和删除div.我有一个条件来检查div不是最后一个,如果您能帮助的话,我已经在代码中对其进行了注释.这是一个示例 jsFiddle
Im a bit stuck. this is what it suppose to do. When you mouse over a menu item it slides out the next menu and adds a new vertical div which must be 5px wide in between the current div and the next but i can't add and remove the div. i have a condition that checks that the div is not the last on I've commented it in my code if you can help it would be appreciated. here is a sample jsFiddle
$(document).ready(function () {
$('.menu-item').mouseenter(function () {
var curr = $(this).closest('.container');
var next = curr.next('.container');
next.animate({ 'left': curr.position().left + curr.width() + 5 });
if(curr.index() < ($('.container').length - 1)){
//here i need to add and remove a </div class="spacer"></div> to the right side
of the current(var curr) div
}
var $index = curr.index() + 1;
$('.container:nth-child(' + $index + ')').nextAll().each(function () {
$(this).animate({ 'left': curr.position().left + curr.width() + 5 });
});
});
});
.spacer
{
background-color:Red; width:5px; height:200px; position:absolute; z-index:1000;
}
<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="menu" style="background-color:Black; width:2000px; height:300px;top:5px; left:50px ">
<div class="container" id="1" style="left:0; width:200px; height:220px; z-index:999; position:absolute; background-color:Aqua">
<div class="menu-item">Menu Item 1</div>
<div class="menu-item">Menu Item 2</div>
<div class="menu-item">Menu Item 3</div>
</div>
<div class="container" id="2" style="left:0; width:200px; height:300px; z-index:998; position:absolute; background-color:Blue">
<div class="menu-item">Menu Item 4</div>
<div class="menu-item">Menu Item 5</div>
<div class="menu-item">Menu Item 6</div>
</div>
<div class="container" id="3" style="left:0; width:200px; height:400px; z-index:997; position:absolute; background-color:Fuchsia">
<div class="menu-item">Menu Item 7</div>
<div class="menu-item">Menu Item 8</div>
<div class="menu-item">Menu Item 9</div>
</div>
<div class="container" id="4" style="left:0; width:200px; height:500px; z-index:996; position:absolute; background-color:Green; float:left">
<div class="menu-item">Menu Item 10</div>
<div class="menu-item">Menu Item 11</div>
<div class="menu-item">Menu Item 12</div>
</div>
<div class="container" id="5" style="left:0; width:200px; height:600px; z-index:995; position:absolute; background-color:Lime; float:left">
<div class="menu-item">Menu Item 10</div>
<div class="menu-item">Menu Item 11</div>
<div class="menu-item">Menu Item 12</div>
</div>
</div>
</td>
</tr>
</table>
推荐答案
Sounds like you need accordion. Why not just use one of the million plugins available for jQuery?
这篇关于动态添加和删除多个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文