如何將jquery代碼應用於UL中的所有LI

Question

警告：我是一名WordPress的黑客，而不是前端開發人員。

我想要複製的代碼的工作副本是here。注意：當您點擊辦公室名稱時，辦公室詳細信息將顯示/隱藏。

這是我想用我自己的jquery重新創建的功能。

我不知道如何使用Chrome的開發人員工具從工作副本中複製jquery。

我有一個jsfiddle的HTML/CSS。

我需要使用jquery這樣的：

$(document).ready(function() { 
    $('.viewLocationDetail').click(function() { 
    $('.mapLocationDetail').toggle; 
    }); 
} 

但我需要這個jQuery被改變，使之適用於.viewLocationDetail所有實例，從而使僅限點擊切換在同一LI的.mapLocationDetail作爲.viewLocationDetail。

例LI：

<li class="corePrettyStyle prettylink map accredited-training-rto disability-employment-services disability-management-services-dms employment-services employment-support-services-ess job-in-jeopardy training-services wa " data-title="Armadale, WA" data-lat="-32.15511" data-long="116.01419499999997" data-locationindex="0"><a title="View Armadale, WA" href="#" class="viewLocationDetail">Armadale, WA <span class="mapcategories">Categories: <span>Accredited Training – RTO Disability Employment Services Disability Management Services (DMS) Employment Services Employment Support Services (ESS) Job in Jeopardy Training Services WA </span></span></a> 
    <div class="mapLocationDetail"> 
    <div class="mapDescription clearfix"> 
     <ul class="maploc-des"> 
     <li>12/47 William Street</li> 
     <li>Armadale, WA 6112</li> 
     <li><strong>Ph:</strong>&nbsp; (08) 6267 2555</li> 
     <li><strong>Fax:</strong> (08) 6267 2556</li> 
     </ul> 
     For queries not related to Employment Services, please call 1300 677 789.</div> 
    <a href="https://staging.orsgroup.com.au/location/armadale-wa/" class="viewLocationPage btn corePrettyStyle">Location &amp; service details</a> 
    <div class="getDirections">Get directions from 
     <input id="directionsPostcode" type="text" value="" size="10"> 
     <a href="#" class="getdirections btn corePrettyStyle">go</a> 
     <div class="mapLocationDirectionsHolder"></div> 
    </div> 
    </div> 
</li> 

Answer 1

我明白你的JavaScript的背景都沒有。嗯，有一些錯誤，繼續前進，閱讀代碼中的註釋：

$(document).ready(function() { 
    $('.viewLocationDetail').click(function() { 
    // 1. Use $(this). 
    $(this).find('.mapLocationDetail').toggle(); // 2. Missing() 
    }); 
}); // 3. Missing closing);