[Vuejs]-How to make bootstrap navbar activate on hover, and do something else on when clicked?

by

0👍

You can do this easily with this JS code: 

 $('.dropdown').on('click', function(){
        location.href='www.example.com';
    });

0👍

With a quick search of bootstrap navbar hover dropdown the first result gave the answer you are looking for. PLEASE RESEARCH BEFORE POSTING A QUESTION!

Source: https://webdesign.tutsplus.com/tutorials/how-to-make-the-bootstrap-navbar-dropdown-work-on-hover–cms-33840

jQuery:

const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
  if (this.matchMedia("(min-width: 768px)").matches) {
    $dropdown.hover(
      function() {
        const $this = $(this);
        $this.addClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "true");
        $this.find($dropdownMenu).addClass(showClass);
      },
      function() {
        const $this = $(this);
        $this.removeClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "false");
        $this.find($dropdownMenu).removeClass(showClass);
      }
    );
  } else {
    $dropdown.off("mouseenter mouseleave");
  }
});

Leave a comment