重点突出的CSS下拉菜单

Question

我有一个简单的自定义CSS下拉菜单，如this。点击下拉菜单按钮将切换下面的容器显示（绝对定位）。我试图模仿HTML选择元素的行为，其中focusout也隐藏菜单。最好的办法是什么？如果我将聚焦事件处理程序添加到下拉内容div，单击该按钮本身将导致一个双重触发器（聚焦和切换）。

$('.dropdown-btn').on('click', function (e) { 
 
\t $('.dropdown-content').toggleClass('hide'); 
 
}); 
 

 
$('.dropdown-btn').focusout(function (e) { 
 
    $('.dropdown-content').addClass('hide'); 
 
}); 
 

 
$('a').on('click', function (e) { 
 
    // wont run 
 
    console.log(this); 
 
});

.dropdown-container { 
 
    position: relative; 
 
} 
 
.dropdown-btn { 
 
    width: 70px; 
 
    background: cyan; 
 
    padding: 12px; 
 
} 
 
.dropdown-content { 
 
    position: absolute; 
 
} 
 

 
.dropdown-content a { 
 
    margin-bottom: 1px; 
 
    background: cyan; 
 
    display: block; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<script 
 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 

 
<div class="dropdown-container"> 
 
    <div class="dropdown-btn" tabindex="-1">Dropdown</div> 
 
    <div class="dropdown-content hide"> 
 
    <a>Dropdown item 1</a> 
 
    <a>Dropdown item 2</a> 
 
    </div> 
 
</div>

Answer 1

上表单元素甲focusout听者工作只。如果你需要它的工作divs你可以分配一个tabindex属性的div。

也从dropdown-content删除absolute并且添加display: inline-block到dropdown-content和dropdown-container。要在焦点事件删除outline这样做：

.dropdown-container:focus { 
    outline: none; 
} 

请参见下面的演示和jsfiddle：

$('.dropdown-btn').on('click', function(e) { 
 
    $('.dropdown-content').toggleClass('hide'); 
 
}); 
 

 
$('.dropdown-container').focusout(function(e) { 
 
    $('.dropdown-content').addClass('hide'); 
 
});

.dropdown-container { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-container:focus { 
 
    outline: none; 
 
} 
 

 
.dropdown-btn { 
 
    width: 70px; 
 
    background: cyan; 
 
    padding: 12px; 
 
} 
 

 
.dropdown-content { 
 
    display: inline-block; 
 
    /*position: absolute;*/ 
 
} 
 

 
.dropdown-content a { 
 
    margin-bottom: 1px; 
 
    background: cyan; 
 
    display: block; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown-container" tabindex="-1"> 
 
    <div class="dropdown-btn">Dropdown</div> 
 
    <div class="dropdown-content hide"> 
 
    <a>Dropdown item 1</a> 
 
    <a>Dropdown item 2</a> 
 
    </div> 
 
</div>