Коррекция выпадающего меню

228

13 января 2018, 00:35

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

Принцип такой, из 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);

Answer 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 () {
    $("div.head").click(function (e) {
      $(".foot").not($(this).next()).slideUp();
      $(this).next().slideToggle();
      e.stopPropagation();
    });
    $("div.foot").click(function (e) {
      e.stopPropagation();
    });
    $(document).click(function () {
      $("div.foot").slideUp();
    });
});

На первый вопрос ответ кроется в отмене распространения события через event.stopPropagation()

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

Answer 2

(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>