Custom Code to close child dropdown only

I built a bigger menu with dropdowns in it. one dropdown is wrapped in another one. now I need to be able to close just the inner dropdown by clicking on a different element (div).

This is the code I have managed so far.
Unfortunately, it does close the parent dropdown too.

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  $(document).ready(function() {
    $('.nav_title-dropdown-wrapper').on('click', function () {
      $(this).closest(".navbar_menu-dropdown").trigger("w-close");
    });
    
    $('.nav_subtitle-dropdown-wrapper').on('click', function (event) {
      event.stopPropagation(); // Prevent the click event from reaching the parent dropdown
      $(this).closest(".navbar_submenu-dropdown").trigger("w-close");
    });
  });
});
</script>

Note it is only visible on mobile and in the Menu: «Ihre Situation»


Here is my site Read-Only: (Webflow - Pflegehilfe.ch)