Закрытие и открытие Dropdown

Question

В данном примере работает открытие и закрытие 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>

https://jsfiddle.net/ducca/ws0g139j/

Answer 1

function CatFunction(t) {
  var dropdown = $(t).siblings(".dropdown-contentCat");
  dropdown.toggleClass("showCat");
}

$(document).mouseup(function(e) {
  if ($("#myDropdownCat.showCat").length > 0 && $(".dropdownCat").has(e.target).length === 0) {
    $("#myDropdownCat").removeClass("showCat");
  }
});

.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 {
  display: none;
  position: absolute;
  margin: 10px 0px 0 0;
  padding: 0;
  width: 173px;
  overflow-y: auto;
  list-style: none;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: white;
  z-index: 1;
}

.d-none {
  display: none;
}

.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(this)" class="dropbtnCat">Category</div>
  <div id="myDropdownCat" class="dropdown-contentCat d-none">
    <a href="/">1</a>
    <a href="/">2</a>
    <a href="/">3</a>
  </div>
</div>

БЛОГ НА HUSL

Закрытие и открытие Dropdown

Ответы (1 шт):