Блог

Я создал несколько выпадающих списков с помощью итерации с javascript. Это работает нормально, за исключением того, что есть момент, когда пользователь должен щелкнуть дважды, чтобы заставить выпадающий список работать.

Это происходит, когда пользователь нажимает на выпадающий список, не закрывает его, переходит к щелчку на другом выпадающем списке, который затем закрывает первый выпадающий список, но затем, если они снова нажимают на первый выпадающий список, для открытия требуется два клика.

Есть ли способ щелкнуть только один раз в этой ситуации? (Я только вставил соответствующий код для выпадающего html)

 $(document).on('turbolinks:load', function() {
  $('.dropbtn').click(function() {
    if ($(this).hasClass("active")) {
      $(this).parent(".dropdown").find('.dropdown-content').removeClass('show-dropdown');
      $(this).removeClass('active');
    } else {
      $('.dropdown-content').removeClass('show-dropdown');
      $(this).parent(".dropdown").find('.dropdown-content').addClass('show-dropdown');
      $(this).addClass('active');
    }
  });
});  

 .show-dropdown {
  display: block;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn"> Options <span>▼</span></button>
  <div class="dropdown-content">
    <span> drop down stuff </span>
  </div>
</div>  

Можете ли вы сбросить выпадающий список при любом нажатии, сделанном вне выпадающего меню?

   $('body').click(function() {
   // [TODO] add if statement to see if dropdown is active?...
   $(this).parent(".dropdown").find('.dropdown-content').removeClass('show-dropdown');
   $(this).removeClass('active');
  });
  

То, что сказал Игло, похоже на правильное решение, хотя без остановки распространения событий его решение мгновенно закроет всплывающее окно при его открытии. Я думаю, вам нужно было бы предотвратить распространение событий, чтобы это сработало.

В моем предлагаемом решении добавлен слой:

 $(document).click(function (event) {

    var multi_select = $(".multi-select-menu");
    if (multi_select.is(":visible")) {
        if (!$(event.target).closest('.multi-select-menu').length) {
            if (!isOpeningMultiSelect) {
                $('.multi-select-menu').slideUp(MULTI_SELECT_SLIDE_TIME);
            }
        }
    }

});
  

У меня есть пользовательский набор выпадающих списков, которые вообще не используют теги ввода.

Вы можете увидеть полный код здесь, поскольку похоже, что я делаю почти то же самое, что и вы. https://dogonnet.us/Me

Это единственный пример выпадающего списка, который виден без регистрации, но вы можете смело зарегистрироваться по поддельному электронному адресу. Веб-сайт находится в разработке. И как только вы это сделаете, вы сможете увидеть огромное количество из них на этой странице: https://dogonnet.us/Dog

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

(Проверьте DOM, код для этой логики выпадающего списка находится в MultiSelect.js )