我在我的页面中有一个div部分，用于添加多个表单和更新它。因此，在部分之一（标签）我想，它应该是嵌套一样
例如：tab下的tab。单击选项卡时，应打开嵌套选项卡。
对于上面的功能，我采用了the logic from here，它很容易和简单，直到它没有嵌套。
如何编写嵌套部分，以便在一个divs中添加多达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>
1条答案
按热度按时间ygya80vv1#
你可以将你的
#accordionid更改为.accordionclass，但是我建议你为parent和childrenaccordion 使用data属性，以避免破坏你的风格或脚本。所以：但如果样式不重要，请使用以下命令：