JQuery: sélectionnez la suite div en dehors de parent div

Ok, je me sens comme si je manquais quelque chose de vraiment simple, mais voici:

Ce code fonctionne très bien, exactement comme je le veux. Vous cliquez sur le lien et le prochain div est révélé (Il y en a environ 10 sur une page)

$('a.addtask').click(function(){ $(this).next('.field').slideToggle(); return false; }); <div class="field"> Some content </div> <a href="#" class="addtask">Add a task</a> <div class="field" style="display:none;"> some other content </div> 

Ce que je veux faire, c'est changer le HTML comme ça (lien dans le div):

 <div class="field"> Some content <a href="#" class="addtask">Add a task</a> </div> <div class="field" style="display:none;"> some other content </div> 

^^ Ce qui ne fonctionne plus correctement.

• La nouvelle vérification du site reCaptcha de Google ne renvoie pas de réponse
• Le menu déroulant Cascade utilisant JS ne fonctionne pas
• Le navigateur ne définira pas les cookies d'un événement onclick
• Promesses nichées
• L'appel de l'API eBay ne fonctionne pas pour l'UPC / EAN

Qu'ai-je besoin de changer dans mon jquery pour que cela fonctionne? J'ai été googling pendant un certain temps maintenant et un certain nombre de solutions dans des publications similaires ne semblent pas fonctionner.

• Erreurs AngularJS dans IE8
• Pourquoi le fichier JavaScript est-il analysé comme PHP dans mon plugin Cake?
• Node.js UnhandledPromiseRejectionWarning même après l'avoir attrapé
• Opérateur fonctionnel réactif pour filtre personnalisé basé sur un autre Observable
• En utilisant des colonnes css3 – comment obtenir la position de l'élément?

 <div class="field"> Some content <a href="#" class="addtask"> Add a task </a> </div> <div class="field" style="display:none;"> some other content </div> 

 .field{ padding:7px; border:1px solid #4455f9; background:#74cca9; } 

 $(function() { $('a.addtask').click(function() { $(this).closest('.field').next('.field').slideToggle(); return false; }); });