Wie man jQuery-Code auf alle LI in einem UL

Question

anwenden Vorbehalt: Ich bin ein Wordpress-Hack, kein Front-End-Entwickler.

Eine Arbeitskopie des Codes, den ich replizieren möchte, ist here. Hinweis: Wenn Sie auf den Büronamen klicken, werden die Bürodetails ein-/ausgeblendet.

Dies ist die Funktionalität, die ich mit meiner eigenen jquery neu erstellen möchte.

Ich weiß nicht, wie man die Entwicklerwerkzeuge von Chrome benutzt, um die jquery aus der Arbeitskopie zu kopieren.

Ich habe eine jsfiddle des HTML/CSS.

brauche ich jquery wie diese verwenden:

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

aber ich brauche diese jquery geändert werden, so dass es für alle Instanzen von .viewLocationDetail gilt, und so, dass der Klick schaltet nur die .mapLocationDetail in der gleichen LI wie die .viewLocationDetail.

Beispiel 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

Ich verstehe Sie nicht aus dem JavaScript-Hintergrund. Nun, es gibt einige Fehler, gehen Sie vor und lesen Sie die Kommentare im Code:

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