單擊可摺疊內容使其摺疊

Question

我在我的應用程序中使用可摺疊小部件。我希望當用戶點擊內容中的任何位置時，它的內容就會崩潰。

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> 

謝謝您的所有建議和解決方案。

Answer 1

添加以下JQUERY代碼。

$(".ui-collapsible-content").on("click", function (e) { 
    $(this).siblings(".ui-collapsible-heading").click(); 
    $(this).slideUp(300); 
}); 

DEMO