我一直致力于实现功能,当用户按下按钮时,他/她可以添加和删除字段。但是,现在我陷入困境。这是我对CodePen的link。我正在使用Bootstrap和一些自定义CSS来实现这一目标。
问题是删除记录按钮删除div下面的按钮而不是它旁边的div。如果删除按钮位于记录2旁边,它应该删除记录2,但我的解决方案删除记录3.我找不到使用我的解决方案实现我想要的方法,即使用Bootstrap。有没有办法使用我的解决方案来实现这一目标?有没有其他方法可以做到这一点?
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<div class="container">
<button class="newBtn collapsed" data-toggle="collapse" href="#collapseExample0">
<!--You can put any valid html inside these!-->
<span class="if-collapsed">Add Employment Record</span>
<span class="if-not-collapsed">Remove Record</span>
</button>
<div class="collapse" id="collapseExample0">
Record 1
<button class="newBtn collapsed" data-toggle="collapse" href="#collapseExample1">
<!--You can put any valid html inside these!-->
<span class="if-collapsed">Add Employment Record</span>
<span class="if-not-collapsed">Remove Record</span>
</button>
</div>
<div class="collapse" id="collapseExample1">
Record 2
<button class="newBtn collapsed" data-toggle="collapse" href="#collapseExample3">
<!--You can put any valid html inside these!-->
<span class="if-collapsed">Add Employment Record</span>
<span class="if-not-collapsed">Remove Record</span>
</button>
</div>
<div class="collapse" id="collapseExample3">
Record 3
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
CSS
[data-toggle="collapse"].collapsed .if-not-collapsed,
[data-toggle="collapse"]:not(.collapsed) .if-collapsed
{
display: none;
}
.collapse.show{
display:flex;
}
使用您的方法,您可以通过更改下面的HTML结构来实现目标:
.newBtn.collapsed {
display:block;
}
.newBtn {
display:none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<button class="newBtn collapsed" data-toggle="collapse" href="#collapseExample0">
<span class="if-collapsed">Add Employment Record</span>
</button>
<div class="collapse" id="collapseExample0">
Record 1
<button class="removeBtn collapsed" data-toggle="collapse" href="#collapseExample0">Remove Record</button>
<button class="newBtn collapsed" data-toggle="collapse" href="#collapseExample1">Add Employment Record</button>
</div>
<div class="collapse" id="collapseExample1">
Record 2
<button class="removeBtn collapsed" data-toggle="collapse" href="#collapseExample1">Remove Record</button>
<button class="newBtn collapsed" data-toggle="collapse" href="#collapseExample3">Add Employment Record</button>
</div>
<div class="collapse" id="collapseExample3">
Record 3
<button class="removeBtn collapsed" data-toggle="collapse" href="#collapseExample3">Remove Record</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>