我正在创建一个小型网站,您可以通过添加儿童或大孩子来创建家谱。我使用的是CSS3 family tree,但我遇到的问题是当添加了一个孩子或者大孩子时,单击按钮时他们没有被添加到正确的li中。我可能还想在点击按钮时删除孩子或者孩子,这可能需要保持计数,尽管我更喜欢先完成添加,然后再继续删除。 任何建议都会非常感激。 感谢
<ul id="navlist">
<li>
<button type="button" id="addChild"> Add Child</button>
</li>
<li>
<button type="button" id="addSib"> Add Sibling</button>
</li>
<li>
<button type="button" id="removeChild"> Remove Child</button>
</li>
<li>
<button type="button" id="removeSib"> Remove Sibling</button>
</li>
</ul>
家谱布局
<div id="content-body">
<div class="tree">
<ul>
<li>
<a href="#" class="p">
<div class="parent"></div>
</a>
<ul>
<li class="li2">
<a href="#" class="c">
<div class="child"></div>
</a>
<ul>
<li class="li3">
<a href="#" class="s">
<div class="sib"></div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
功能
$(document).ready(function(){
$("#addChild").click(function(){
var row = $('a').parent('.li2');
var c = $("<a href='#' class='c'><div class='child'></div></a>");
$('c').append(row);
c.appendTo(row);
});
$("#addSib").click(function(){
var row = $('a').parent('.li3')
var a = $("<a href='#' class='s'><div class='sib'></div></a>");
$('s').append(row);
a.appendTo(row);
});
});