diff --git a/src/dropdownToggle/docs/demo.html b/src/dropdownToggle/docs/demo.html index 5c12fe9708..0be683fbd3 100644 --- a/src/dropdownToggle/docs/demo.html +++ b/src/dropdownToggle/docs/demo.html @@ -2,9 +2,24 @@ Click me for a dropdown, yo! + + + + + \ No newline at end of file diff --git a/src/dropdownToggle/docs/readme.md b/src/dropdownToggle/docs/readme.md index 2e42c46be6..5e7f4f47d4 100644 --- a/src/dropdownToggle/docs/readme.md +++ b/src/dropdownToggle/docs/readme.md @@ -1,2 +1,2 @@ -DropdownToggle is a simple directive which will toggle a dropdown link on click. Simply put it on the `` tag of the toggler-element, and it will find the nearest dropdown menu and toggle it when the `` is clicked. +DropdownToggle is a simple directive which will toggle a dropdown link on click. Simply put it on the `` tag of the toggler-element, and it will find the nearest dropdown menu and toggle it when the `` is clicked. Alternately, you can also make a dropdown menu toggle on hover using the attribute `dropdown-hover` i.e. `` diff --git a/src/dropdownToggle/dropdownToggle.js b/src/dropdownToggle/dropdownToggle.js index e04ccf7b90..a07277cbe8 100644 --- a/src/dropdownToggle/dropdownToggle.js +++ b/src/dropdownToggle/dropdownToggle.js @@ -20,6 +20,19 @@ angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle', [' link: function(scope, element, attrs) { scope.$watch('$location.path', function() { closeMenu(); }); element.parent().bind('click', function() { closeMenu(); }); + + if (attrs.dropdownHover) { + element.parent().bind('mouseover', function(event) { + event.stopPropagation(); + element.parent().addClass('open'); + }); + + element.parent().bind('mouseout', function(event) { + event.stopPropagation(); + element.parent().removeClass('open'); + }); + } + element.bind('click', function (event) { var elementWasOpen = (element === openElement); diff --git a/src/dropdownToggle/test/dropdownToggleSpec.js b/src/dropdownToggle/test/dropdownToggleSpec.js index ae5b154e99..0fd267efa0 100644 --- a/src/dropdownToggle/test/dropdownToggleSpec.js +++ b/src/dropdownToggle/test/dropdownToggleSpec.js @@ -14,7 +14,22 @@ describe('dropdownToggle', function() { function dropdown() { return $compile('')($rootScope); } - + + function dropdownHover() { + return $compile('')($rootScope); + } + + it('should toggle if hover is true', function() { + var elm = dropdownHover(); + expect(elm.hasClass('open')).toBe(false); + elm.find('a').mouseover(); + expect(elm.hasClass('open')).toBe(true); + + // only close the dropdown after exiting li tag. + elm.find('li').mouseout(); + expect(elm.hasClass('close')).toBe(false); + }); + it('should toggle on `a` click', function() { var elm = dropdown(); expect(elm.hasClass('open')).toBe(false);