如何制作一个扩展模态的按钮并给我一个额外的表格？ （HTML）

Question

我有一个看起来像这样的模态

html部分看起来很简单

                        <input type="hidden" name="InterviewId" data-bind="value: selectedInterview().id" />
                        <div class="form-group">
                            <label>Cover Page Notes</label>
                            <textarea name="CoverPageNotes" class="form-control" maxlength="415"></textarea>
                        </div>
                        <div>
                            <!-- ??? create the interviewScheduleJson, use knockout data-binding -->
                            <input type="hidden" name="InterviewScheduleJson" />
                        </div>
                        <div>
                            <label>
                                <input type="checkbox" name="IncludeCoverPage" value="true" checked />
                                <input type="hidden" name="IncludeCoverPage" value="false" />
                                Include Cover Page
                            </label>
                        </div>
                        <div>
                            <label>
                                <input type="checkbox" name="IncludeCandidateSummary" value="true" checked />
                                <input type="hidden" name="IncludeCandidateSummary" value="false" />
                                Include Candidate Summary
                            </label>
                        </div>
                        ...

我想要做的是，我想在“封面页注释”和“包含封面页”之间另外设置一个按钮来扩展模态，并为我提供一个新的输入表单。所以可能是这样的：

如何制作一个扩展模态的按钮并给我一个额外的表格？

Answer 1

UI就是这样的。 xtended div将包含与原始<form>互补的字段（您没有提供此类表单的详细信息，因此我无法详细说明）。

var xtend = function() {
  document.getElementById('xtended').style.display = 'block';
}

<style>
    #xtended {
        display:none;
    }
    .button {
      display: inline-block;
      margin-bottom: 0;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      border: 1px solid black;
      white-space: nowrap;
      padding: 0.3em;
      background-color:#eee;
      border-radius:3px;
    }
</style>
<input type="hidden" name="InterviewId" data-bind="value: selectedInterview().id" />
                        <div class="form-group">
                            <label>Cover Page Notes</label>
                            <textarea name="CoverPageNotes" class="form-control" maxlength="415"></textarea>
                        </div>
                        <div class="form-group">
                            <div id="xtended"> This is the extended part with other stuff in it</div>
                            <div class="button"><span onclick="xtend();">Extend</span></div>
                        </div>
                        <div>
                            <!-- ??? create the interviewScheduleJson, use knockout data-binding -->
                            <input type="hidden" name="InterviewScheduleJson" />
                        </div>
                        <div>
                            <label>
                                <input type="checkbox" name="IncludeCoverPage" value="true" checked />
                                <input type="hidden" name="IncludeCoverPage" value="false" />
                                Include Cover Page
                            </label>
                        </div>
                        <div>
                            <label>
                                <input type="checkbox" name="IncludeCandidateSummary" value="true" checked />
                                <input type="hidden" name="IncludeCandidateSummary" value="false" />
                                Include Candidate Summary
                            </label>
                        </div>