Clicking on the dropdown will open it, while moving the mouse away will close it

My current challenge is getting this element to open on click and close when the mouse moves away. I've managed to make it open on hover using CSS, but I'm struggling to combine both behaviors. Unfortunately, my searches haven't yielded a solution so far.

This is the code I have been working on:

<div class="col-md-3"><div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle text-left border-0 rounded-0 py-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-plus float-right" aria-hidden="true"></i>
    <i class="fa fa-minus float-right" aria-hidden="true"></i>

  </button>

  <div class="dropdown-menu rounded-0 border-0" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div></div>

body {
  background: #eeeeee;
}

.btn {
  width: 100%;
}
.dropdown-menu {
  width: 100%;
  height: 100vw;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
 }

.dropdown-toggle:after {
   content: ''; 
}
.btn:hover .fa-plus {
    display:none
}

Currently, the element opens/closes on click. The fontawesome icons are included as part of an attempt to change them dynamically.

Thank you!

htmlcssbootstrap-4

Answer №1

Edit

Update the event listener for the mouseleave event on the .dropdown-menu element and ensure to stop the event from bubbling up. Also, a correction needs to be made - where it says .dropdown-toggle, it should actually be data-toggle. Additionally, although changing the class from .dropdown-toggle to .data-toggle shouldn't affect functionality, it is crucial if you plan on copying and pasting this code somewhere else.

$('.dropdown-menu').on('mouseleave', function(e) {
    $('.data-toggle').dropdown("toggle");
    e.stopPropagation();
});

Old

Instead of referring to the .dropdown-toggle element, target the element with the data-toggle attribute, which is an integral part of Bootstrap's dropdown component. Here is the correct implementation:

$('.dropdown').on('mouseleave', function() {
    $(".dropdown-toggle").dropdown("toggle"); 
});

Snippet

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'>
<style>
body { background: #eeeeee; }
.btn { width: 100%; }
.dropdown-menu { width: 100%; height: 100vw; }
.dropdown:active .dropdown-menu { display: block; margin-top: 0; }
.dropdown-toggle:after { display: none; }
.btn:active .fa-plus { display: none }
</style>
</head>
<body>
<header> </header>
<section id="testA">
   <div class="col-md-3">
   
      <div class="dropdown closed">
      
         <button class="data-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
         
         Dropdown button 
         <i class="fa fa-minus float-right" aria-hidden="true"></i> 
         <i class="fa fa-plus float-right" aria-hidden="true"></i> 
         
         </button>
         
         <div class="dropdown-menu rounded-0 border-0" aria-labelledby="dropdownMenuButton"> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a> </div>
      </div>
      
   </div>
   
</section>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> 
<script>


$('.dropdown-menu').on('mouseleave', function(e) {
$('.data-toggle').dropdown("toggle");
    e.stopPropagation();
});

</script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to pass an array to PHP and then display it in HTML?

After setting up a form with 3 select tags in my HTML, I attempted to create an array using jQuery and send it to PHP. The goal is to retrieve data from PHP and display it on my HTML page. Below is the code snippet: HTML code <form name="myform"> ...

phpjqueryhtmlajax

When the document loads, remember to implement a click event on the list item

With the following list: <ul id="test" > <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> I am looking to trig ...

javascriptjqueryhtml

Tablet displaying incomplete background image

I am facing an issue with my background image only showing inside the content blocks, as you can see in the screenshot. I have a small fadeIn animation for the content, but nothing else special. Here is the CSS code I am using: .template_home { backgro ...

htmlcssimageipadtablet

No input value provided

I can't figure out what's going wrong. In other js files, this code works fine. Here is my HTML code: <table class='table'> <tr> <th>Event</th><td><input class='for ...

javascriptjqueryhtml

No action when clicking JQuery-ui Dialog button on IE11

I created a form using the following HTML structure: <div id="dialogGlobal" title="About You"> <form> <fieldset style="border: none;"> <ul style="list-style-type: none; padding-left: 0px"> <li><lab ...

javascriptjqueryhtmlinternet-explorerjquery-ui-dialog

Guidelines for implementing a seamless translation effect with CSS3

CSS: .horizon { position: absolute; top: 380px; width: 1800px; height: 50px; background: url(images/road.png) repeat-x; -webkit-animation-name: prop-600; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: i ...

javascripthtmlcss

Tips on avoiding HTML escaping in Razor (standalone)

I am working with a Model that has a property called Content which stores HTML as a string. var model = new { Content = ... } Razor.Parse(templateBody, model) I am trying to figure out how to render this HTML string using standalone Razor. I attempted: ...

html.netasp.net-mvcrazor

Avoid using sticky positioning if the element exceeds the height of the screen

I have a sidebar that is set to be sticky, but in some cases it is taller than the height of the screen. If the sidebar ends up being larger than the screen height, I don't want it to stay at the top. Instead, it should scroll along with the content ...

htmlcsstwitter-bootstrapbootstrap-4sticky

What is the best way to synchronize the image dimensions and source when dynamically loading images?

I am facing an issue with a function that updates images by altering the src and css (width/height) of an IMG tag within the document. Below is a simplified example to demonstrate the problem: updateImage = function(src, width, height) { $("#changeMe"). ...

javascriptjquerycssimage

What is the best way to adjust text to a specific width on an HTML canvas?

Is there a way to adjust the width of a single-line text string precisely on an HTML5 canvas? My current method involves initially setting a font size, measuring the text's width using measureText(my_text).width, and then determining a new font size b ...

htmltexthtml5-canvasmeasurement

Set the search input to occupy the full width of the container by utilizing Bootstrap's

I'm having trouble adjusting the width of my search input to 100% on screen resize (using @media (max-width: 1200px)). The issue: https://i.sstatic.net/EMr6W.jpg Here's how it should look (I can achieve this with a specific pixel width, but not ...

htmlcssformstwitter-bootstrap

What should we name this particular style of navigation tab menu?

What is the name of this tab menu that includes options for next and previous buttons? Additionally, is there a material-ui component available for it? https://i.sstatic.net/0m9rH.png ...

javascriptcssreactjsmaterial-ui

Could someone provide a more thorough explanation of selectionDirection please?

According to MDN, the selectionDirection attribute determines the direction in which a selection was made. It is considered "forward" if selected from left-to-right in an LTR locale or right-to-left in an RTL locale, and "backward" if done in the opposite ...

htmlformsinputattributes

Stop CSS Grid cell from causing vertical expansion of cells in adjacent columns

I believe that visual aids are more effective than text in illustrating the issue: My Objective https://i.sstatic.net/vBAsI.png Current Situation Looking at the example, you can see that the title and description expand equally to accommodate the gallery ...

cssflexboxcss-grid

I'm unable to select a checkbox using Python Selenium

My attempt to create a checkbox using Python Selenium resulted in an error message. selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable I believe the issue lies with the element, but I am unsure of its exact locat ...

pythonhtmlpython-3.xselenium

A guide to creating full-screen Angular components that perfectly match the size of the window

Currently, I am working on an Angular project where in my app.component.html file, I have various components like this: <app-selector1></app-selector1> <app-selector2></app-selector2> ... I am trying to figure out how to make my c ...

cssangular

What is the most efficient way to generate a single random value?

Is there a way to generate a random value only once and ensure that it remains constant, even when called within a function? If I use the Random method inside a function, the value of 'x' changes every time the function is called due to the metho ...

javascripthtmlcss

Sending information to other domains and managing the feedback

As a newcomer to Jquery, I am attempting to send data to a cross-domain and need to manage the response, which is a complete HTML page. Here is the code snippet I am using: $.ajax({ url: "http://www.somehost.com/abc/xyz.php", type: "post", d ...

jqueryhtmlajaxpost

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters

The class "pagination pagination-lg" from the link https://angular-ui.github.io/bootstrap/#/pagination seems to be malfunctioning in Bootstrap 4

Just starting out with angularjs and I'm trying to implement pagination using https://angular-ui.github.io/bootstrap/#/pagination. However, I'm facing an issue where the style class "pagination pagination-lg" is not applying properly. I'm cu ...

cssangularjsangular-ui-bootstrapbootstrap-4