Javascript, закрывающий выпадающий список с document.onclick - PullRequest
Новая
       6

Javascript, закрывающий выпадающий список с document.onclick

0 голосов
/ 01 июня 2018

У меня есть выпадающий список с использованием ul и li: 

<img class="options_toggle" src="assets/down_arrow.png"onclick="toggle_display('options');"/>

<ul id="options" class="options_content hide">
      <li>
           option one
      </li>
</ul>

функция options_toggle переключается между классами «hide» и «show» в параметрах ul.Теперь я хочу скрыть это, только когда пользователь щелкает где-нибудь, кроме переключателя опций: 

$(document).ready(function () {
document.onclick = function(e) {

    // prevent the dropdown from closing instantly when you click the toggle to open it
    $(".options_toggle").click(function (e) {
        e.stopPropagation();
    });

    // hide the dropdown
    $(".options_content").removeClass("show");
    $(".options_content").addClass("hide");
};
});

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

Есть идеи, что он делает, и почему он отменяет или игнорирует первый переключатель?Спасибо.

1 Ответ

0 голосов
/ 01 июня 2018

Обычно неправильно добавлять обработчик событий в другой обработчик событий.Просто свяжите ваш обработчик $(".options_toggle").click() на верхнем уровне. 

$(document).ready(function() {
  $(".options_toggle").click(function(e) {
    // prevent the dropdown from closing instantly when you click the toggle to open it
    e.stopPropagation();
  });

  $(document).click(function(e) {
    // hide the dropdown
    $(".options_content").removeClass("show");
    $(".options_content").addClass("hide");
  });
});
...