[자바스크립트] 드롭다운

<button class="btn btn-gray btn-left confirmPostBtn">확인하기</button>

<div class="dropdown">

<button class="btn-gray btn-left dropbtn icon icon-black icon-down2"

onclick="myFunction()"></button>

<div class="dropdown-content" id="myDropdown">

<a href="#">바로가기</a>

<a href="#">편집하기</a>

<a href="#">삭제하기</a>

</div>

</div>

.confirmPostBtn {

display: block;

position: absolute;

}

.dropdown {

vertical-align: middle;

}

.dropdown .dropbtn {

width: 44px;

height: 45px;

margin: 24px 0 24px 1px;

border: 2px solid transparent;

position: relative;

left: 55px;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

z-index: 1;

}

.dropdown-content a {

float: none;

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

.dropdown-content a:hover {

background-color: #ddd;

}

.show {

display: block;

}

// 버튼을 클릭하면  숨김과 드롭다운 내용 표시 사이에서 전환

function myFunction() {

var position = $('#myDropdown');

position.offset({});

document.getElementById("myDropdown").classList.toggle("show");

}

// 외부에서 클릭한 경우 드롭다운 닫기

$(document).ready(function() {

window.onclick = function(e) {

if (!e.target.matches('.dropbtn')) {

var myDropdown = document.getElementById("myDropdown");

if (myDropdown.classList.contains('show')) {

myDropdown.classList.remove('show');

}

}

}

});