bootstrap 드롭다운 메뉴 hover시 작동하도록

부트스트랩 4.x 버전에서 hover에 대한 data 설정이 빠져버린것 같다;

클릭시만 드롭다운되도록....

navbar 사용시 너무 불편한것 같아서 hover시 열리도록 스크립트를 찾아봄.

css

.dropdown-toggle::after { transition: transform 0.15s linear;}

.show.dropdown .dropdown-toggle::after {transform: translateY(3px);}

.dropdown-menu {margin-top: 0;} /* hover 메뉴때문에 넣음 */

jquery

var $dropdown = $(".navbar-nav .dropdown");

  var $dropdownToggle = $(".dropdown-toggle");

  var $dropdownMenu = $(".dropdown-menu");

  var showClass = "show";

  $(window).on("load resize", function() {

    if (this.matchMedia("(min-width: 768px)").matches) {

      $dropdown.hover(

        function() {

          var $this = $(this);

          $this.addClass(showClass);

          $this.find($dropdownToggle).attr("aria-expanded", "true");

          $this.find($dropdownMenu).addClass(showClass);

        },

        function() {

          var $this = $(this);

          $this.removeClass(showClass);

          $this.find($dropdownToggle).attr("aria-expanded", "false");

          $this.find($dropdownMenu).removeClass(showClass);

        }

      );

    } else {

      $dropdown.off("mouseenter mouseleave");

    }

  });