Enable nested dropdowns

soundasleep · Aug 31, 2017 · d73157a · d73157a
1 parent 50a9c28
commit d73157a
Showing 1 changed file with 31 additions and 22 deletions.
diff --git a/jquery.dropdown.js b/jquery.dropdown.js
@@ -48,7 +48,7 @@ if (jQuery) (function ($) {
         } else {
             if (trigger !== object.target && $(object.target).hasClass('jq-dropdown-ignore')) return;
         }
-        hide();
+        hide(event);
 
         if (isOpen || trigger.hasClass('jq-dropdown-disabled')) return;
 
@@ -75,50 +75,59 @@ if (jQuery) (function ($) {
         // In some cases we don't hide them
         var targetGroup = event ? $(event.target).parents().addBack() : null;
 
-        // Are we clicking anywhere in a jq-dropdown?
-        if (targetGroup && targetGroup.is('.jq-dropdown')) {
-            // Is it a jq-dropdown menu?
-            if (targetGroup.is('.jq-dropdown-menu')) {
-                // Did we click on an option? If so close it.
-                if (!targetGroup.is('A')) return;
-            } else {
-                // Nope, it's a panel. Leave it open.
-                return;
-            }
+        // hide other dropdowns, but not the one we've clicked within
+        var toHide = $(document).find('.jq-dropdown:visible').not(
+            $(event.target).parents('.jq-dropdown'));
+
+        if (targetGroup && targetGroup.is('.jq-dropdown') &&
+            targetGroup.is('.jq-dropdown-menu') &&
+            targetGroup.is('A')) {
+            // Clicked an option within the current dropdown
+            // If this is a nested dropdown, make sure to keep the parent dropdown open
+            toHide = $(event.target).closest('.jq-dropdown:visible')
         }
 
         // Trigger the event early, so that it might be prevented on the visible popups
         var hideEvent = jQuery.Event("hide");
 
-        $(document).find('.jq-dropdown:visible').each(function () {
+
+        toHide.each(function () {
             var jqDropdown = $(this);
             jqDropdown
                 .hide()
-                .removeData('jq-dropdown-trigger')
                 .trigger('hide', { jqDropdown: jqDropdown });
         });
 
         if(!hideEvent.isDefaultPrevented()) {
             // Hide any jq-dropdown that may be showing
-            $(document).find('.jq-dropdown:visible').each(function () {
+            toHide.each(function () {
+                // Remove all jq-dropdown-open classes
                 var jqDropdown = $(this);
+                var trigger = jqDropdown.data('jq-dropdown-trigger');
+                trigger.removeClass('jq-dropdown-open');
                 jqDropdown
                     .hide()
                     .removeData('jq-dropdown-trigger')
                     .trigger('hide', { jqDropdown: jqDropdown });
             });
-
-            // Remove all jq-dropdown-open classes
-            $(document).find('.jq-dropdown-open').removeClass('jq-dropdown-open');
         }
     }
 
     function position() {
+        $('.jq-dropdown:visible').each(function() {
+            positionDropdown($(this));
+         });
+    }
+
+    function positionDropdown(jqDropdown) {
+
+        var trigger = jqDropdown.data('jq-dropdown-trigger');
+        if (!trigger) {
+            return;
+        }
 
-        var jqDropdown = $('.jq-dropdown:visible').eq(0),
-            trigger = jqDropdown.data('jq-dropdown-trigger'),
-            hOffset = trigger ? parseInt(trigger.attr('data-horizontal-offset') || 0, 10) : null,
-            vOffset = trigger ? parseInt(trigger.attr('data-vertical-offset') || 0, 10) : null;
+        var hOffset = parseInt(trigger.attr('data-horizontal-offset') || 0, 10),
+            vOffset = parseInt(trigger.attr('data-vertical-offset') || 0, 10);
 
         if (jqDropdown.length === 0 || !trigger) return;
 
@@ -144,4 +153,4 @@ if (jQuery) (function ($) {
     $(document).on('click.jq-dropdown', hide);
     $(window).on('resize', position);
 
-})(jQuery);
+})(jQuery);