1

Привет! Пытаюсь выстроить меню с выпадающими блоками и у меня возникли небольшие затруднения.

Принцип такой, из HTML берём аттрибут data в котором прописан id блока, который мы скрываем/отображаем через jQuery. Два вопроса: как запретить скрытие блока .navbar-dropdown-content при клике на самого себя (он закрывается, потому что является дочерним элементом блока, которому я задал эту функцию) и как правильно организовать сокрытие блока при клике на любое другое место в странице?

  <span class="navbar-dropdown" data-dropdown-id="navbar-dropdown-user">
    Первая кнопка
    <div class="navbar-dropdown-content" id="navbar-dropdown-user">
      Контент
    </div>
  </span>
  <span class="navbar-dropdown" data-dropdown-id="navbar-dropdown-user2">
    Вторая кнопка
    <div class="navbar-dropdown-content" id="navbar-dropdown-user2">
      Контент 2
    </div>
  </span>

 (function ($) {

  'use strict';

  $(document).ready(function(){
      $(".navbar-dropdown").click(function(){
          var link = $(this);
          var dropdown_id = "#" + $(link).data("dropdown-id");

          $.fn.dropdownOn = function() {
            $(link).addClass("is-active");
            $(dropdown_id).show();
            $(".navbar-dropdown").not(link).removeClass("is-active");
            $(".navbar-dropdown-content").not(dropdown_id).hide();
          };

          $.fn.dropdownOff = function() {
            $(link).removeClass("is-active");
            $(dropdown_id).hide();
          };

          if ($(link).hasClass("is-active")) {
            $(this).dropdownOff();
          } else {
            $(this).dropdownOn();
          };

      });
  });



})(jQuery);

2 ответа 2

1

(function($) {

  'use strict';

  $(document).ready(function() {
  
    // организовать сокрытие блока при клике на любое другое место в странице
    $(document).click(function(e) {
      if (!$(e.target).hasClass("navbar-dropdown") &&
          $(e.target).closest(".navbar-dropdown").length == 0)
        $(".navbar-dropdown-content").hide();
    });
    
    $(".navbar-dropdown").click(function(e) {
      // запретить скрытие блока .navbar-dropdown-content при клике на самого себя
      if ($(e.target).hasClass("navbar-dropdown-content"))
        return;
    
      var link = $(this);
      var dropdown_id = "#" + $(link).data("dropdown-id");

      var dropdownOn = function() {
        $(link).addClass("is-active");
        $(dropdown_id).show();
        $(".navbar-dropdown").not(link).removeClass("is-active");
        $(".navbar-dropdown-content").not(dropdown_id).hide();
      };

      var dropdownOff = function() {
        $(link).removeClass("is-active");
        $(dropdown_id).hide();
      };

      if ($(link).hasClass("is-active")) {
        dropdownOff();
      } else {
        dropdownOn();
      };

    });
  });

})(jQuery);
.navbar-dropdown-content{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="navbar-dropdown" data-dropdown-id="navbar-dropdown-user">
    Первая кнопка
    <div class="navbar-dropdown-content" id="navbar-dropdown-user">
      Контент
    </div>
  </span>
<span class="navbar-dropdown" data-dropdown-id="navbar-dropdown-user2">
    Вторая кнопка
    <div class="navbar-dropdown-content" id="navbar-dropdown-user2">
      Контент 2
    </div>
  </span>

1

Я сильно не разбираюсь, только учусь. Потому ответ не самый полезный возможно, но все же: Мне не сильно понятно для чего столько кода :) Опишу как писал менюшки для себя :

1) По наведению :

$(function () {
  $("div.wrap").hover(function () {
    $(this).find('.foot').stop(true).slideToggle();
  });
});

Блок меню в разметке выглядит так (классу ".foot" в стилях задан "display: none;":

<div class="wrap">
    <div class="head"></div>
    <div class="foot"></div>
</div>

2) По клику кнопки меню под ту-же разметку:

$(function () {
        $(".head").click(function (e) {
            $(".foot").not($(this).next()).slideUp();
            $(this).next().slideToggle();
        });

        $(document).click(function (e) {
            if (!$(".wrap").is(e.target) && $(".wrap").has(e.target).length === 0) {
                $(".foot").slideUp();
            }
        });
    });

Надеюсь поможет хоть частично.

11
  • Довольно смело останавливать событие на конкретном элементе и тут же писать обработчик $(document).click. А если в странице используются другие скрипты с подобной логикой - как они узнают о кликах по документу?
    – user176262
    11 янв 2018 в 16:53
  • Можно спаковать все в один обработчик .on , но тогда его нужно будет все равно вызвать на $(document) и сделать проверку типа !div.is(e.target). Функцию легко изолировать, чем она мешает остальным? И не сильно понял по остановке. Поясните начинающему :) 11 янв 2018 в 19:01
  • Вы останавливаете событие клик в $("div.head").click, так что до обработчиков $(document).click дело не доходит. Но Вы знаете, что для клика на остальной части страницы обработчик клика документа нужен. Для данного меню все очень хорошо.
    – user176262
    11 янв 2018 в 19:31
  • Представьте, что помимо скрипта для этого меню, есть еще один (или несколько) - в совершенно отдельных файлах, возможно даже, на других ресурсах. Друг про друга эти скрипты не знают. Но каждый из них рассчитывает, что его обработчики для $(document).click вызовутся. Для них или для Вас, в зависимости от порядка подключения скриптов, эти рассчеты не оправдаются.
    – user176262
    11 янв 2018 в 19:31
  • " так что до обработчиков $(document).click дело не доходит" Я точно не понимаю хода вашей мысли :) Что его останавливает? У меня в коде 3 отдельных функции вызванные на элементах по обработчику .click, которые можно собрать в одну с проверками, но так читабельней. И они не доступны за пределами функции отрабатывающей по загрузке DOM, на сколько я знаю :) 11 янв 2018 в 19:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.