How to hide dropdown menu on page enter?

Bootstrap Studio Help
1

Hello. I had a bss dropdown menu element. It was not hoverable at first but I found a piece of JS code so its hoverable now. But when you first enter the page, the dropdown menu is already open. I need it to be not visible at first but visible when hover on it.

This is my js code, and you can see it in action here

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");
  }
});
2

You need to remove the class show on both the dropdown and the dropdown-menu.

3

Take a look at this thread. There are pure CSS options.

https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click

4

Remove from where? In javascript code? Im not good at coding, can you show me how to do it please? Thanks

edit: I can remove the "show" class because its a locked layer and dont let me remove it

5

Try this

function toggleDropdown (e) { const _d = $(e.target).closest('.dropdown'), _m = $('.dropdown-menu', _d); setTimeout(function(){ const shouldOpen = e.type !== 'click' && _d.is(':hover'); _m.toggleClass('show', shouldOpen); _d.toggleClass('show', shouldOpen); $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen); }, e.type === 'mouseleave' ? 300 : 0); }

$('body') .on('mouseenter mouseleave','.dropdown',toggleDropdown) .on('click', '.dropdown-menu a', toggleDropdown);

6

The problem is not in the javascript code. When you open a dropdown when editing it in Bootstrap Studio a helper menu appears with Dropdown Open or Dropdown Close at the top of the viewport. You have left the menu in the "open" state. You need to click close before publishing or exporting or else the menu will load in the open state. Just choose either the dropdown-menu or the dropdown and click "close" and it will remove the "open" class on both.

7

I meant to say it will remove the show class.

8

Omg thats it thanks !