как задать правильное поведение дропдауну?

Question

Моя задача заключается в создании поведения элемента листа, у которого при нажатии кнопки должен открываться дропдаун и а другие дропдауны должны закрыться, так же при нажатии на элемент списка дропдауна, нажатии вне дропдауна и вновь на кнопку открытия он должен закрыться. В моем исполнении работает все, за исключением повторного нажатия кнопки открытия для закрытия его.

function openMenu () {
    let openBtn = $('.list-item__dropdown-btn');
    openBtn.on('click', function () {
        if ($(this).hasClass('closed')) {
            $(document).on('mousedown.openBtn', function (e) {
                if ((e.target) !== openBtn) {
                    openBtn.each(function () {
                        if ($(this).not('closed')) {
                            $(this).addClass('closed')
                        }
                    });
                }
            });
            $(this).removeClass('closed')
        }
    })
}
openMenu();

.container {
  display: flex;
  flex-direction: column;
}

.list-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #aaaaaa;
  width: 300px;
  height: 30px;
  border: 1px solid black;
  border-radius: 4px;
  margin-bottom: 5px;
}
.list-item__dropdown-btn {
  cursor: pointer;
  padding: 2px 4px;
  height: 20px;
  background-color: #252525;
  border-radius: 4px;
  border-color: white;
  margin-right: 20px;
  color: #b7b7b7;
  position: relative;
}
.closed .dropdown-container {
  display: none;
}

.dropdown-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  top: 24px;
  right: -80px;
  z-index: 3;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(25,24,48,.13);
  padding: 15px 10px 22px;
  width: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="conrainer">
  <div class="list-item">
    <div class="list-item__dropdown-btn closed"> open 
      <div class='dropdown-container'>
        <span class='dropdown-container__item'>item</span>
        <span class='dropdown-container__item'>item</span>
        <span class='dropdown-container__item'>item</span>
      </div>
    </div>
  </div>
    <div class="list-item">
    <div class="list-item__dropdown-btn closed"> open 
      <div class='dropdown-container'>
        <span class='dropdown-container__item'>item</span>
        <span class='dropdown-container__item'>item</span>
        <span class='dropdown-container__item'>item</span>
      </div>
    </div>
  </div>
    <div class="list-item">
    <div class="list-item__dropdown-btn closed"> open 
      <div class='dropdown-container'>
        <span class='dropdown-container__item'>item</span>
        <span class='dropdown-container__item'>item</span>
        <span class='dropdown-container__item'>item</span>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

как задать правильное поведение дропдауну?

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