CSSドロップダウンメニュー

Question

thisのような簡単なカスタムCSSドロップダウンメニューがあります。ドロップダウンメニューボタンをクリックすると、その下のコンテナの表示が切り替えられます（絶対配置されます）。私は、フォーカスアウトもメニューを隠すHTML select要素の動作を模倣しようとしています。そうする最良の方法は何でしょうか？ドロップダウンコンテンツのdivにfocusoutイベントハンドラを追加すると、ボタン自体をクリックするとダブルトリガ（フォーカスアウトとトグル）が発生します。

$('.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を除去し、dropdown-contentとdropdown-containerにdisplay: inline-blockを添加しました。

.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>

が