重點突出的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>