Question

我一直在研究一种实现功能的方法，当用户按下按钮时，他/她可以添加和删除字段。但是，现在我陷入了困境。这是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;
}

Answer 1

使用您的方法，可以通过更改以下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>

使用引导程序

1 个答案: