В данном примере работает открытие и закрытие Dropdown меню, как по кнопке, так и вне её. Но. Повторное открытие по кнопке не происходит. Подскажите, как откорректировать javascript, чтобы все работало.
function CatFunction() {
document.getElementById("myDropdownCat").classList.toggle("showCat");
$(document).mouseup(function(e) {
var container = $(".showCat");
if (container.has(e.target).length === 0) {
container.hide();
}
});
}
.dropbtnCat {
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
width: 125px;
height: 29px;
font-size: 14px;
line-height: 21px;
cursor: pointer;
background: white;
border-radius: 25px;
border: 1px solid #A1A1A1;
color: #000000;
}
.dropdown-contentCat {
position: absolute;
margin: 10px 0px 0 0;
padding: 0;
width: 173px;
overflow-y: auto;
list-style: none;
display: none;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 5px;
background: white;
z-index: 1;
}
.dropdown-contentCat a {
display: block;
width: 100%;
font-size: 15px;
color: black;
padding: 6px 0 6px 0;
text-decoration: none;
align-items: center;
text-align: center;
}
.dropdownCat a:hover {
color: #0084F8;
background: #F7F7F7;
}
.dropdownCat a:focus {
outline: none;
}
.showCat {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdownCat">
<div onclick="CatFunction()" class="dropbtnCat">Category</div>
<div id="myDropdownCat" class="dropdown-contentCat">
<a href="/">1</a>
<a href="/">2</a>
<a href="/">3</a>
</div>
</div>