javascript - Dropdown list blur event

Question

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.

Answer 1

尝试使用mouseleave()事件

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

Answer 2

我的下拉菜单只有 .toggle()

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

，这是我点击下拉菜单的时候。如果我点击页面上的其他地方，我有这个；

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

在页面其余部分的 div 上，我设置了一个 onmousedown 事件

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

我的菜单放在母版页上。