用于更新多个表单的嵌套 jquery 手风琴

Question

我的页面中有一段 div 用于添加多个表单并更新它。所以在其中一个部分（选项卡）中，我希望它应该像

一样嵌套

例如：选项卡在选项卡下。单击选项卡时，应打开嵌套选项卡。

对于上述功能，我采用了 here 中的逻辑，该逻辑在没有嵌套之前非常简单。

请帮我解决嵌套部分，以便我可以加起来到我的 div's

之一内的 4-5 个嵌套选项卡

$(function() {
      $("#accordion").accordion({
        collapsible: true,
        active: false
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="accordion">
    <h3 style="text-align: left;">SITE DETAILS</h3>
    <div>
      <span>SITE TYPE: </span>
      <select id="ddlSiteType">
                    <option value="--Select--">--Select--</option>
                    <option value="INDOOR">INDOOR</option>
                    <option value="OUTDOOR">OUTDOOR</option>
                </select>

      <br />
      <span>FACILITY TYPE: </span>
      <select id="ddlFacilityType">
                    <option value="--Select--">--Select--</option>
                    <option value="BTS">BTS</option>
                    <option value="MWR">MWR</option>
                    <option value="OR">OR</option>
                    <option value="FSR">FSR</option>
                    <option value="POI">POI</option>
                    <option value="MAN">MAN</option>
                    <option value="BAN">BAN</option>
                    <option value="MCN">MCN</option>
                    <option value="MSC">MSC</option>
                    <option value="IS">IS</option>
                </select>
      <br />

      <span>PLOT/ROOF TOP AREA ACQUIRED(METER X METER): </span>
      <input type="text" id="txtAreaRequired" />
      <br />

      <span>SITE LOCATION: </span>
      <select id="ddlSiteLocation">
                    <option value="--Select--">--Select--</option>
                    <option value="LOW LYING">LOW LYING</option>
                    <option value="INSIDE FARM">INSIDE FARM</option>
                    <option value="THROUGH OWNERS HOUSE">THROUGH OWNERS HOUSE</option>
                </select>
      <br />

      <span>RJIL SHARING TYPE: </span>
      <select id="ddlRJILSharingType">
                    <option value="--Select--">--Select--</option>
                    <option value="INDOOR">INDOOR</option>
                    <option value="ODC">ODC</option>
                    <option value="RJIL NOT SHARING">RJIL NOT SHARING</option>
                </select>
      <br />

      <span>SITE REACHABILITY /ACCESS: </span>
      <select id="ddlSiteReachabilityAccess">
                    <option value="--Select--">--Select--</option>
                    <option value="ACCESSIBLE BY ROAD">ACCESSIBLE BY ROAD</option>
                    <option value="NOT ACCESSIBLE">NOT ACCESSIBLE</option>
                </select>
      <br />

      <span>GUARDED SITE</span>
      <select id="ddlGuardedSite">
                    <option value="--Select--">--Select--</option>
                    <option value="YES">YES</option>
                    <option value="NO">NO</option>
                </select>
      <br />
      <br />


      <input type="button" id="btnSiteDetails" value="Update Site Details" onclick="return SaveSiteDetails();" />

    </div>



    <h3 style="text-align: left;">TOWER DETAILS</h3>
    <div>
      <span>TOWER TYPE</span>
      <select id="ddlTowerType">
                    <option value="--Select--">--Select--</option>
                    <option value="GBT">GBT</option>
                    <option value="RTT">RTT</option>
                    <option value="RTP">RTP</option>
                </select>
      <br />


      <span>HEIGHT OF TOWER</span>
      <input type="text" id="txtTowerHeight" />
      <br />

      <span>PHYSICAL CONDITION OF TOWER</span>
      <select id="ddlPhysicalCondTower">
                    <option value="--Select--">--Select--</option>
                    <option value="OK">OK</option>
                    <option value="NOT-OK">NOT-OK</option>
                </select>
      <br />


      <span>NO. OF ANGLES MISSING</span>
      <input type="text" id="txtNoOfAnglesMissing" />
      <br />

      <span>NO. OF BRACINGS MISSING</span>
      <input type="text" id="txtNoOfBracingMissing" />
      <br />

      <span>NO. OF CLIT PLATES MISSING</span>
      <input type="text" id="txtNoClitMissing" />
      <br />

      <span>NO OF NUTBOLT MISSING</span>
      <input type="text" id="txtNoOfNutBoltMissing" />
      <br />

      <span>NO OF VACANT GSM MOUNT AVAILABLE AT TOWER</span>
      <input type="text" id="txtNoOfVacantGSMMount" />
      <br />

      <span>NO OF VACANT MW MOUNT AVAILABLE AT TOWER</span>
      <input type="text" id="txtNoOfVacantMWMount" />
      <br />

      <span>TOWER CLIMBING LADDER IN GOOD CONDITION</span>
      <select id="ddlTowerClimbLadderGoodCond">
                    <option value="--Select--">--Select--</option>
                    <option value="YES">YES</option>
                    <option value="NO">NO</option>
                </select>

      <br />
      <br />
       
          
          //Nested code
          
        <div>
                <span>TOWER TYPE</span>
                <select id="ddlTowerType2">
                    <option value="--Select--">--Select--</option>
                    <option value="GBT">GBT</option>
                    <option value="RTT">RTT</option>
                    <option value="RTP">RTP</option>
                </select>
                <br />


                <span>HEIGHT OF TOWER</span>
                <input type="text" id="txtTowerHeight2" />
                <br />

                <span>PHYSICAL CONDITION OF TOWER</span>
                <select id="ddlPhysicalCondTower2">
                    <option value="--Select--">--Select--</option>
                    <option value="OK">OK</option>
                    <option value="NOT-OK">NOT-OK</option>
                </select>
                <br />


                <span>NO. OF ANGLES MISSING</span>
                <input type="text" id="txtNoOfAnglesMissing2" />
                <br />

                <span>NO. OF BRACINGS MISSING</span>
                <input type="text" id="txtNoOfBracingMissing2" />
                <br />

                <span>NO. OF CLIT PLATES MISSING</span>
                <input type="text" id="txtNoClitMissing2" />
                <br />

                <span>NO OF NUTBOLT MISSING</span>
                <input type="text" id="txtNoOfNutBoltMissing2" />
                <br />

                <span>NO OF VACANT GSM MOUNT AVAILABLE AT TOWER</span>
                <input type="text" id="txtNoOfVacantGSMMount2" />
                <br />

                <span>NO OF VACANT MW MOUNT AVAILABLE AT TOWER</span>
                <input type="text" id="txtNoOfVacantMWMount2" />
                <br />

                <span>TOWER CLIMBING LADDER IN GOOD CONDITION</span>
                <select id="ddlTowerClimbLadderGoodCond2">
                    <option value="--Select--">--Select--</option>
                    <option value="YES">YES</option>
                    <option value="NO">NO</option>
                </select>

                <br />
                <br />

                <input type="button" id="btnTowerDetails" value="Update Tower Details" onclick="return SaveTowerDetails();" />

            </div>

Answer 1

您可以将您的 #accordion id 更改为 .accordion class 但我建议您为避免破坏您的样式或脚本使用 data 属性 parent 和 children 手风琴。所以：

$(function() {
  $("[data-type='accordion']").accordion({
    collapsible: true,
    active: false
  });
});

#accordion2 .ui-accordion-content {
min-height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="accordion" data-type="accordion">


  <h3 style="text-align: left;">SITE DETAILS</h3>
  <div>

    <div id="accordion2" data-type="accordion">
      <h3>NEW Content</h3>
      <div> <span>SITE TYPE: </span>
    <select id="ddlSiteType">
                    <option value="--Select--">--Select--</option>
                    <option value="INDOOR">INDOOR</option>
                    <option value="OUTDOOR">OUTDOOR</option>
                </select>

    <br />
    <span>FACILITY TYPE: </span>
    <select id="ddlFacilityType">
                    <option value="--Select--">--Select--</option>
                    <option value="BTS">BTS</option>
                    <option value="MWR">MWR</option>
                    <option value="OR">OR</option>
                    <option value="FSR">FSR</option>
                    <option value="POI">POI</option>
                    <option value="MAN">MAN</option>
                    <option value="BAN">BAN</option>
                    <option value="MCN">MCN</option>
                    <option value="MSC">MSC</option>
                    <option value="IS">IS</option>
                </select>
    <br />

    <span>PLOT/ROOF TOP AREA ACQUIRED(METER X METER): </span>
    <input type="text" id="txtAreaRequired" />
    <br />

    <span>SITE LOCATION: </span>
    <select id="ddlSiteLocation">
                    <option value="--Select--">--Select--</option>
                    <option value="LOW LYING">LOW LYING</option>
                    <option value="INSIDE FARM">INSIDE FARM</option>
                    <option value="THROUGH OWNERS HOUSE">THROUGH OWNERS HOUSE</option>
                </select>
    <br />

    <span>RJIL SHARING TYPE: </span>
    <select id="ddlRJILSharingType">
                    <option value="--Select--">--Select--</option>
                    <option value="INDOOR">INDOOR</option>
                    <option value="ODC">ODC</option>
                    <option value="RJIL NOT SHARING">RJIL NOT SHARING</option>
                </select>
    <br />

    <span>SITE REACHABILITY /ACCESS: </span>
    <select id="ddlSiteReachabilityAccess">
                    <option value="--Select--">--Select--</option>
                    <option value="ACCESSIBLE BY ROAD">ACCESSIBLE BY ROAD</option>
                    <option value="NOT ACCESSIBLE">NOT ACCESSIBLE</option>
                </select>
    <br />

    <span>GUARDED SITE</span>
    <select id="ddlGuardedSite">
                    <option value="--Select--">--Select--</option>
                    <option value="YES">YES</option>
                    <option value="NO">NO</option>
                </select>
    <br />
    <br />


    <input type="button" id="btnSiteDetails" value="Update Site Details" onclick="return SaveSiteDetails();" /></div>
    </div>

    <span>SITE TYPE: </span>
    <select id="ddlSiteType">
                    <option value="--Select--">--Select--</option>
                    <option value="INDOOR">INDOOR</option>
                    <option value="OUTDOOR">OUTDOOR</option>
                </select>

    <br />
    <span>FACILITY TYPE: </span>
    <select id="ddlFacilityType">
                    <option value="--Select--">--Select--</option>
                    <option value="BTS">BTS</option>
                    <option value="MWR">MWR</option>
                    <option value="OR">OR</option>
                    <option value="FSR">FSR</option>
                    <option value="POI">POI</option>
                    <option value="MAN">MAN</option>
                    <option value="BAN">BAN</option>
                    <option value="MCN">MCN</option>
                    <option value="MSC">MSC</option>
                    <option value="IS">IS</option>
                </select>
    <br />

    <span>PLOT/ROOF TOP AREA ACQUIRED(METER X METER): </span>
    <input type="text" id="txtAreaRequired" />
    <br />

    <span>SITE LOCATION: </span>
    <select id="ddlSiteLocation">
                    <option value="--Select--">--Select--</option>
                    <option value="LOW LYING">LOW LYING</option>
                    <option value="INSIDE FARM">INSIDE FARM</option>
                    <option value="THROUGH OWNERS HOUSE">THROUGH OWNERS HOUSE</option>
                </select>
    <br />

    <span>RJIL SHARING TYPE: </span>
    <select id="ddlRJILSharingType">
                    <option value="--Select--">--Select--</option>
                    <option value="INDOOR">INDOOR</option>
                    <option value="ODC">ODC</option>
                    <option value="RJIL NOT SHARING">RJIL NOT SHARING</option>
                </select>
    <br />

    <span>SITE REACHABILITY /ACCESS: </span>
    <select id="ddlSiteReachabilityAccess">
                    <option value="--Select--">--Select--</option>
                    <option value="ACCESSIBLE BY ROAD">ACCESSIBLE BY ROAD</option>
                    <option value="NOT ACCESSIBLE">NOT ACCESSIBLE</option>
                </select>
    <br />

    <span>GUARDED SITE</span>
    <select id="ddlGuardedSite">
                    <option value="--Select--">--Select--</option>
                    <option value="YES">YES</option>
                    <option value="NO">NO</option>
                </select>
    <br />
    <br />


    <input type="button" id="btnSiteDetails" value="Update Site Details" onclick="return SaveSiteDetails();" />

  </div>



  <h3 style="text-align: left;">TOWER DETAILS</h3>
  <div>
    <span>TOWER TYPE</span>
    <select id="ddlTowerType">
                    <option value="--Select--">--Select--</option>
                    <option value="GBT">GBT</option>
                    <option value="RTT">RTT</option>
                    <option value="RTP">RTP</option>
                </select>
    <br />


    <span>HEIGHT OF TOWER</span>
    <input type="text" id="txtTowerHeight" />
    <br />

    <span>PHYSICAL CONDITION OF TOWER</span>
    <select id="ddlPhysicalCondTower">
                    <option value="--Select--">--Select--</option>
                    <option value="OK">OK</option>
                    <option value="NOT-OK">NOT-OK</option>
                </select>
    <br />


    <span>NO. OF ANGLES MISSING</span>
    <input type="text" id="txtNoOfAnglesMissing" />
    <br />

    <span>NO. OF BRACINGS MISSING</span>
    <input type="text" id="txtNoOfBracingMissing" />
    <br />

    <span>NO. OF CLIT PLATES MISSING</span>
    <input type="text" id="txtNoClitMissing" />
    <br />

    <span>NO OF NUTBOLT MISSING</span>
    <input type="text" id="txtNoOfNutBoltMissing" />
    <br />

    <span>NO OF VACANT GSM MOUNT AVAILABLE AT TOWER</span>
    <input type="text" id="txtNoOfVacantGSMMount" />
    <br />

    <span>NO OF VACANT MW MOUNT AVAILABLE AT TOWER</span>
    <input type="text" id="txtNoOfVacantMWMount" />
    <br />

    <span>TOWER CLIMBING LADDER IN GOOD CONDITION</span>
    <select id="ddlTowerClimbLadderGoodCond">
                    <option value="--Select--">--Select--</option>
                    <option value="YES">YES</option>
                    <option value="NO">NO</option>
                </select>

    <br />
    <br /> //Nested code

    <div>
      <span>TOWER TYPE</span>
      <select id="ddlTowerType2">
                    <option value="--Select--">--Select--</option>
                    <option value="GBT">GBT</option>
                    <option value="RTT">RTT</option>
                    <option value="RTP">RTP</option>
                </select>
      <br />


      <span>HEIGHT OF TOWER</span>
      <input type="text" id="txtTowerHeight2" />
      <br />

      <span>PHYSICAL CONDITION OF TOWER</span>
      <select id="ddlPhysicalCondTower2">
                    <option value="--Select--">--Select--</option>
                    <option value="OK">OK</option>
                    <option value="NOT-OK">NOT-OK</option>
                </select>
      <br />


      <span>NO. OF ANGLES MISSING</span>
      <input type="text" id="txtNoOfAnglesMissing2" />
      <br />

      <span>NO. OF BRACINGS MISSING</span>
      <input type="text" id="txtNoOfBracingMissing2" />
      <br />

      <span>NO. OF CLIT PLATES MISSING</span>
      <input type="text" id="txtNoClitMissing2" />
      <br />

      <span>NO OF NUTBOLT MISSING</span>
      <input type="text" id="txtNoOfNutBoltMissing2" />
      <br />

      <span>NO OF VACANT GSM MOUNT AVAILABLE AT TOWER</span>
      <input type="text" id="txtNoOfVacantGSMMount2" />
      <br />

      <span>NO OF VACANT MW MOUNT AVAILABLE AT TOWER</span>
      <input type="text" id="txtNoOfVacantMWMount2" />
      <br />

      <span>TOWER CLIMBING LADDER IN GOOD CONDITION</span>
      <select id="ddlTowerClimbLadderGoodCond2">
                    <option value="--Select--">--Select--</option>
                    <option value="YES">YES</option>
                    <option value="NO">NO</option>
                </select>

      <br />
      <br />

      <input type="button" id="btnTowerDetails" value="Update Tower Details" onclick="return SaveTowerDetails();" />

    </div>

但是如果样式不重要，使用这个：

$(function() {
  $(".accordion").accordion({
    collapsible: true,
    active: false
  });
});

用于更新多个表单的嵌套 jquery 手风琴

Nested jquery accordion for updating multiple forms

javascript

jquery

accordion

jquery-plugins