Question

我有一个多节手风琴，有两列。页面设置如下：

<div class="panel-group" id="Accordion">
<div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#Accordion" data-target="#ApplicantInfo">
        <h4 class="panel-title">
            <a class="accordion-toggle">
                Applicant Information:
            </a>
        </h4>
    </div>
    <div id="ApplicantInfo" class="panel-collapse collapse in">
        <div class="panel-body">
            <div class="row">
                <div id="divApplicant" class="col-xs-6">Applicant:</div>
                <div id="divApplicantPhone" class="col-xs-6">Applicant Telephone:</div>
            </div>
            <div class="row spFieldRow">
                <div class="col-xs-6">
                  <span dir="none">
                     <input id="applinantName" ...>
                  </span>
                </div>
                <div class="col-xs-6">
                  <span dir="none">
                     <input id="applinantPhone" ...>
                  </span>
                </div>
            </div>              
            <div class="row">
                <div id="divApplicantEmail" class="col-xs-6">Applicant Email:</div>
                <div id="divApplicantType" class="col-xs-6">Applicant Type:</div>
            </div>
            <div class="row spFieldRow">
                <div class="col-xs-6">
                  <span dir="none">
                     <input id="applinantEmail" ...>
                  </span>
                </div>
                <div class="col-xs-6">
                  <span dir="none">
                     <input id="applinantType" ...>
                  </span>
                </div>
            </div>
        </div>
    </div>
</div>

在大多数情况下，它运行良好。但是，我的某些字段是动态的，具体取决于对其他字段之一的选择。我遇到的问题是，如果我删除说输入行，甚至只是文本框，都会缩小面板的宽度。

我附了几张照片来说明。
之前：

之后：

我尝试影响整个行，甚至在标签和输入容器周围添加了一个div容器并将其隐藏。没关系，第二行向上移动并缩小。请客气，我是我的新手（我第一次来），并且最近几年没有做太多前端开发。感谢您的协助。

编辑：我创建了一个尽可能接近此位置的JSFiddle，并且无法重新创建问题（you can find it here if you want）。

我完全忘记了之前的内容，但是此页面位于SharePoint网站上，因此正在加载所有其他类型的CSS。我的猜测是其中之一正在阻碍。如果有人在我之前见过这个，我将不胜感激。

Answer 1

我不确定这是您要查找的内容，但是您可以随意显示/隐藏它们，而不是动态添加面板本身。

（您仍然可以根据需要向每个面板动态添加内容，而不仅仅是面板-它们充当动态内容的容器）

请参见下面的演示（在下拉框中选择申请人类型）：

$(function() {
  
  $("select").on("change", function() {
    
    if ($(this).val() === 'Internal') {      
      $("#externalPanel").collapse('hide');
      $("#internalPanel").removeClass('hide');
      $("#internalPanel").collapse('show');
      
    } else if ($(this).val() === 'External') {      
      $("#internalPanel").collapse('hide');
      $("#externalPanel").removeClass('hide');
      $("#externalPanel").collapse('show');
    } else {
      $(".secondary-panel").collapse('hide');      
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="panel-group" id="ADMSAccordion">
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#ADMSAccordion" data-target="#ApplicantInfo">
      <h4 class="panel-title">
        <a class="accordion-toggle">
                    Applicant Information:
                </a>
      </h4>
    </div>
    <div id="ApplicantInfo" class="panel-collapse collapse in">
      <div class="panel-body">
        <div class="row">
          <div id="divApplicant" class="col-xs-6">Applicant:</div>
          <div id="divApplicantPhone" class="col-xs-6">Applicant Telephone:</div>
        </div>
        <div class="row">
          <div class="col-xs-6">
            <input title="Applicant" type="text" maxlength="255" />
          </div>
          <div class="col-xs-6">
            <input title="ApplicantPhone" type="text" maxlength="255" />
          </div>
        </div>
        <div class="row">
          <div id="divApplicantEmail" class="col-xs-6">Applicant Email:</div>
          <div id="divApplicantType" class="col-xs-6">Applicant Type:</div>
        </div>
        <div class="row">
          <div class="col-xs-6">
            <input title="ApplicantEmail" type="text" maxlength="255" />
          </div>
          <div class="col-xs-6">
            <select title="ApplicantType">
              <option selected="Selected" value=""></option>
              <option value="Internal">Internal</option>
              <option value="External">External</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- External panel -->
<div id="externalPanel" class="panel panel-default hide secondary-panel">
  <div class="panel-heading">
    <h3 class="panel-title">External Panel</h3>
  </div>
  <div class="panel-body">
    External Panel content
  </div>
</div>

<!-- INternal panel -->
<div id="internalPanel" class="panel panel-default hide secondary-panel">
  <div class="panel-heading">
    <h3 class="panel-title">Internal Panel</h3>
  </div>
  <div class="panel-body">
    Internal Panel content
  </div>
</div>

隐藏两列自举式手风琴中的对象会破坏格式

1 个答案: