jackie jackie - 3 months ago 28
jQuery Question

Collapse Bootstrap navbar on blur

I'm trying to get a navbar menu with multiple layers to collapse if a user is TABBING through the menu and eventually tabs out of the menu (menu loses focus). I've tried doing things like

$(.dropdown-toggle).blur(function () {.....


but haven't been able to get anything to work appropriately. Has anyone done this? According to bootstrap's collapsing content doc, they provide functionality for a button to collapse the content, but in theory, this should be a really simple script, no?

http://v4-alpha.getbootstrap.com/components/navbar/#collapsing-content

Answer

You should use $('.dropdown-toggle').focus(function(){}); And for out of focus use $('.dropdown-toggle').focusout(function(){});

Also you can use .dropdown-toggle:focus {...} in your css to make what you want to archieve.

The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.

p.s i don't know if it was a TYPO but you are missing your '' when selecting the .dropdown-toggle class with jquery

Comments