CODEWITHSUNDEEP
javascripthtmldrop-down-menufocusblur
evolutionxbox
evolutionxbox

Reputation: 4122

Dropdown list blur event

I am building a dropdown list of anchor tags (not a select):

<ul>
  <li class="selected"><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
  <li><a href="#">List item 3</a></li>
  <li><a href="#">List item 4</a></li>
</ul>

When a user selected the list, it triggers a focus state which shows all items. I also want it to blur when the user clicks off of the ul or selects an item.

Is this possible?

Note: .blur() and .focus() only work with form elements.

Upvotes: 0

Views: 6558

Answers (2)

Moelbeck
Moelbeck

Reputation: 640

I have just .toggle() for my dropdown

function DropDownMenu() {
  var item1 = document.getElementById("dropdownmenu1");
     $("#dropdownmenu1").toggle();
 }

, this is when I click on the dropdown. If I click elsewhere on the page, I have this;

function BlurDropDown() {
    $("#dropdownmenu1").fadeOut(1000);
}

And on my div for the rest of the page, I have set a onmousedown event

    <div id="page" onmousedown="BlurDropDown()">

My menu is placed on the master page.

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

Try using mouseleave() event

$( "ul" ).mouseleave(function() {
     //console.log('similar to blur');
});

Upvotes: 1

Related Questions