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

您可以将I get "Error: invalid_grant". ID更改为#accordion课程，但我建议您为了避免破坏您的风格或脚本，请使用.accordion和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>

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

1 个答案: