0
我在我的应用程序中使用可折叠小部件。我希望当用户点击内容中的任何位置时,它的内容就会崩溃。单击可折叠内容使其折叠
Here是我的JSFiddle,所以你可以从这里开始。
<div data-role="collapsible-set" id="AccidentDetailsCol">
<div data-role="collapsible" class="animateMe" data-theme="b" data-content-theme="a" data-divider-theme="b" data-collapsed="false">
<h3>Accident Details</h3>
<ul data-role="listview" data-inset="true" style="margin: 0 0 0 0px;">
<li>
<h2 style="margin: 0 0 0 0px;">Accident Number: </h2>
<label for="text" id="accNumber" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Date: </h2>
<label for="text" id="accDate" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Time: </h2>
<label for="text" id="accTime" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">City:</h2>
<label for="text" id="accCity" class="wrap" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Location:</h2>
<label for="text" id="accLocate" class="wrap" style="margin: 0 0 0 0px;"></label>
</li>
</ul>
</div>
<div data-role="collapsible" class="animateMe" data-theme="b" data-content-theme="a" data-divider-theme="b">
<h3>Assured Details</h3>
<ul data-role="listview" data-inset="true" style="margin: 0 0 0 0px;">
<li>
<h2 style="margin: 0 0 0 0px;">Car License Plate Number: </h2>
<label for="text" id="accAssLicenPlat" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Claim Number:</h2>
<label for="text" id="accAssClaimNum" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Claim Status:</h2>
<label for="text" id="accAssClaimStat" style="margin: 0 0 0 0px;"></label>
</li>
</ul>
</div>
<div data-role="collapsible" class="animateMe" data-theme="b" data-content-theme="a" data-divider-theme="b">
<h3>Litigant Details</h3>
<ul data-role="listview" data-inset="true" style="margin: 0 0 0 0px;">
<li>
<h2 style="margin: 0 0 0 0px;">Name: </h2>
<label for="text" id="accLitName" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Telephone: </h2>
<label for="text" id="accLitTel" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">E-mail: </h2>
<label for="text" id="accLitMail" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Driver License Number: </h2>
<label for="text" id="accLitDrivLicen" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Car License Number: </h2>
<label for="text" id="accLitCarLicenNum" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Car Brand: </h2>
<label for="text" id="accLitCarBrand" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Car Color: </h2>
<label for="text" id="accLitCarColor" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Has Insurance: </h2>
<label for="text" id="accLitHasIns" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<div id="histLitInsDet">
</div>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Claim Number:</h2>
<label for="text" id="accLitClaimNum" style="margin: 0 0 0 0px;"></label>
</li>
<li>
<h2 style="margin: 0 0 0 0px;">Claim Status:</h2>
<label for="text" id="accLitClaimStat" style="margin: 0 0 0 0px;"></label>
</li>
</ul>
</div>
</div>
谢谢您的所有建议和解决方案。
非常感谢您! @SureshPonnukalai –
为什么投票?我的代码中有任何错误? –
当我点击时,鼠标位置错误。我很抱歉....你的回答是最好的答案! –