First things first: http://jsfiddle.net/9L81kfah/
I have a Bootstrap dropdown that's supposed to open and stay open if somebody does a mouse-over for more than 200ms, especially if they then move the mouse over the menu content, but it's not staying open. What am I doing wrong here?
This is the dropdown code:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
And the jQuery:
jQuery('#dropdownMenu1').hover(function() {
jQuery(this).next('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).next('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
It's because your hover handler is on the button element and as soon as you mouseover the menu element the "mouseout" handler triggers because you left the button. Instead your handler should be on the surrounding .dropdown element.
$('.dropdown').hover(function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
Now when you're hovering the button it will work because the button is a child of the .dropdown element and the hover event bubbles up through the parent elements. When you move the mouse from the button to the dropdown menu you'll still be hovering over .dropdown as well because the menu too is a child of .dropdown. Only when you leave the parent element entirely will the "mouseout" handler fire.
http://jsfiddle.net/1xpLm4jw/
You're telling your dropdown to fade out after you mouse off the button. Instead, you should tell it to fade out after you mouse off the entire dropdown group.
jQuery('#dropdownMenu1').hover(function() {
jQuery(this).next('.dropdown-menu').stop(true, true).delay(200).fadeIn();
});
jQuery('.dropdown').on("mouseout", function() {
jQuery('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
You would need to have a timer to get this working. Only trigger the fadeOut if the mouse is not over the dropdown. Simply put you can use the combination of
mouseover and mouseout events.
var timeout;
jQuery('.dropdown').on('mouseover', function () {
clearInterval(timeout);
jQuery('.dropdown-menu', this).stop(true, true).delay(200).fadeIn();
});
jQuery('.dropdown').on('mouseout', function () {
var thisView = this;
timeout = setTimeout(function () {
jQuery('.dropdown-menu', thisView).stop(true, true).delay(200).fadeOut();
}, 200);
});
Check Fiddle
I want to toggle a chevron in a bootstrap drop down menu, when the drop down is toggled. I can make it toggle when clicked, but I would rather it toggle on drop down that way if you click on another part of the menu the chevron changes back. It currently will stay with the minus sign unless you click the chevron to change it back.
<li class="dropdown navbar-custom first-navbar-custom">
<a href="#" data-toggle="dropdown" class="dropdown-toggle shortNav hidden-md hidden-lg pull-left cheveron-dropdown">
<span class="chevron_toggleable glyphicon glyphicon-plus glyphiconIcon hidden-md hidden-lg">
</span>
</a>
<a href="/glass-containers/c/455/"><strong>Glass Containers</strong>
</a>
<ul class="dropdown-menu">
<script>
$(document).ready(function() {
$('dropdown-toggle').dropdown('toggle', function() {
$('.chevron_toggleable').toggleClass('glyphicon-plus glyphicon-minus');
});
});
</script>
I feel like its really close, I just don't have the jquery part correct can someone please help me and tell me what I am doing wrong.
The fiddle should explain all. https://jsfiddle.net/nu8wmjq5/
SECOND EDIT BASED ON AUTHORS JSFIDDLE:
The code below will react to all events on the dropdowns specific to the class selector. It then finds the chevron that is inside the specific dropdown that has fired the event.
FIDDLE: https://jsfiddle.net/t79to9xu/
$(document).ready(function() {
$('.myDropdown').on('show.bs.dropdown', function () {
$(this).find('.chevron_toggleable')
.removeClass("glyphicon-plus")
.addClass("glyphicon-minus");
})
$('.myDropdown').on('hide.bs.dropdown', function () {
$(this).find('.chevron_toggleable')
.removeClass("glyphicon-minus")
.addClass("glyphicon-plus");
})
});
I'm sure there is a nicer way of doing this, but I'll let you do your research. .find() searches the descendents of the element.
https://api.jquery.com/find/
As such it's worth noting that if your dropdown has two elements with the .chevron-toggleable class inside of it, it'll amend both of them. You'll need to be more specific with your selector if that ever becomes the case.
EDIT:
I've attached some example code. This is a forked version of the example provided to another question by Skelly here:
http://www.bootply.com/zjWn1QPfNU
JS:
$('#myDropdown').on('show.bs.dropdown', function () {
$('#chevron').removeClass("glyphicon-plus").addClass("glyphicon-minus");
})
$('#myDropdown').on('hide.bs.dropdown', function () {
$('#chevron').removeClass("glyphicon-minus").addClass("glyphicon-plus");
})
HTML:
<div class="btn-group" id="myDropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span id="chevron" class="glyphicon glyphicon-plus"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
ORIGINAL ANSWER
Bootstrap has a bunch of different events that fire when interacting with a dropdown. They're in the official documentation here.
Specifically the ones you'll find of interest are hide.bs.dropdown (event is fired immediately when it is about to be hidden) and hidden.bs.dropdown (fired after the dropdown has been hidden).
$('#myDropdown').on('hide.bs.dropdown', function () {
// DROPDOWN IS GOING TO CLOSE, CHANGE CHEVRON HERE.
})
Does this help?
<script>
$(document).ready(function() {
$('dropdown-toggle').dropdown('toggle', function() {
if($('.chevron_toggleable').hasClass('glyphicon-plus')) {
$(this).removeClass("glyphicon-plus").addClass("glyphicon-minus");
} else {
$(this).removeClass("glyphicon-minus").addClass("glyphicon-plus");
}
});
});
</script>
For future researchers this is for navbar dropdowns and this code might help you
$(function() {
// THIS WILL FIRE WHENEVER DROPDOWN SHOW
$('.nav > li.dropdown').on('show.bs.dropdown', function () {
$(this).find('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
});
// THIS WILL FIRE WHENEVER DROPDOWN HIDE
$('.nav > li.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
});
});
Here is a working fiddle https://jsfiddle.net/qfe9e7tb/1/
Information and Question:
If you run the JSFiddle you'll notice that the dropdown pops open like it's supposed to when the document loads but when you click the button it doesn't. It's the same exact code but I can't for the life of me figure out why it doesn't have the same results.
JSFiddle: http://jsfiddle.net/pLsuxkaa/
HTML:
<input type="button" onclick="testfun();" value="Test"/>
<p></p>
<br/>
<br/>
<div class="dropdown testmenu">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
</div>
Scripts:
$(function ()
{
$('p').html('started');
$('.testmenu .dropdown-menu').dropdown('toggle');
});
function testfun()
{
$('p').html('test button pushed');
$('.testmenu .dropdown-menu').dropdown('toggle');
}
When u write
$('.testmenu .dropdown-menu').dropdown('toggle');
You declare a new dropdown, after this you just have to toggle like this :
$('.testmenu .dropdown-menu').toggle();
Complete code :
$(function ()
{
$('p').html('started');
$('.testmenu .dropdown-menu').dropdown('toggle');
});
function testfun()
{
$('p').html('test button pushed');
$('.testmenu .dropdown-menu').toggle();
}
You would have to call testfun() from inside the $(function () (document ready) function, as using bootstrap functions requires the page to be finished loading
You can just bind an event to the input button, and have the callback function open the dropdown menu. Here's an example:
$('input').on('click', function (e) {
e.stopPropagation();
$('p').html('test button pushed');
$('.testmenu .dropdown-menu').dropdown('toggle');
});
And here's a working jsfiddle.
OK, so what I need is fairly straightforward.
I have set up a navbar with some dropdown menus in it (using class="dropdown-toggle" data-toggle="dropdown"), and it works fine.
The thing is it works "onClick", while I would prefer if it worked "onHover".
Is there any built-in way to do this?
The easiest solution would be in CSS. Add something like...
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
Working Fiddle
The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
You can use jQuery's hover function.
You just need to add the class open when the mouse enters and remove the class when the mouse leaves the dropdown.
Here's my code:
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
An easy way, using jQuery, is this:
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
});
For CSS it goes crazy when you also click on it. This is the code that I'm using, it also don't change anything for mobile view.
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
In Twitter Bootstrap is not implemented but you can use the this plugin
Update 1:
Sames question here
Hover over the nav items to see that they activate on hover.
http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
So you have this code:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
Normally it works on click event, and you want it work on hover event. This is very simple, just use this javascript/jquery code:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
This works very well and here is the explanation: we have a button, and a menu. When we hover the button we display the menu, and when we mouseout of the button we hide the menu after 100ms. If you wonder why i use that, is because you need time to drag the cursor from the button over the menu. When you are on the menu, the time is reset and you can stay there as many time as you want. When you exit the menu, we will hide the menu instantly without any timeout.
I've used this code in many projects, if you encounter any problem using it, feel free to ask me questions.
This will help you make your own hover class for bootstrap:
CSS:
/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
display: block;
}
Margins are set to avoid unwanted close and they are optional.
HTML:
<div class="btn-group hover_drop_down">
<button type="button" class="btn btn-default" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
Don't forget to remove the button attribute data-toggle="dropdown" if you want to remove onclick open, and this also will work when input is append with dropdown.
This is what I use to make it dropdown on hover with some jQuery
$(document).ready(function () {
$('.navbar-default .navbar-nav > li.dropdown').hover(function () {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
}, function () {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
});
});
Updated with a proper plugin
I have published a proper plugin for the dropdown hover functionality, in which you can even define what happens when clicking on the dropdown-toggle element:
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
Why I made it, when there are many solutions already?
I had issues with all the previously existing solutions. The simple CSS ones are not using the .open class on the .dropdown, so there will be no feedback on the dropdown toggle element when the dropdown is visible.
The js ones are interfering with clicking on .dropdown-toggle, so the dropdown shows up on hover, then hides it when clicking on an opened dropdown, and moving out the mouse will trigger the dropdown to show up again. Some of the js solutions are braking iOS compatibility, some plugins are not working on modern desktop browsers which are supporting the touch events.
That's why I made the Bootstrap Dropdown Hover plugin which prevents all these issues by using only the standard Bootstrap javascript API, without any hack.
Try this using hover function with fadein fadeout animations
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
This only hovers the navbar when you are not on a mobile device, because I find that hovering the navigation does not work well on mobile divices:
$( document ).ready(function() {
$( 'ul.nav li.dropdown' ).hover(function() {
// you could also use this condition: $( window ).width() >= 768
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
}, function() {
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
});
});
I try other solutions, i'm using bootstrap 3, but dropdown menu closes too quickly to move over it
supposed that you add class="dropdown" to li, i added a timeout
var hoverTimeout;
$('.dropdown').hover(function() {
clearTimeout(hoverTimeout);
$(this).addClass('open');
}, function() {
var $self = $(this);
hoverTimeout = setTimeout(function() {
$self.removeClass('open');
}, 150);
});
Triggering a click event with a hover has a small error. If mouse-in and then a click creates vice-versa effect. It opens when mouse-out and close when mouse-in. A better solution:
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});
Bootstrap drop-down Work on hover, and remain close on click by adding property display:block; in css and removing these attributes data-toggle="dropdown" role="button" from button tag
.dropdown:hover .dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle">Dropdown Example</button>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
</html>
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});
html
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
jquery
$(document).ready( function() {
/* $(selector).hover( inFunction, outFunction ) */
$('.dropdown').hover(
function() {
$(this).find('ul').css({
"display": "block",
"margin-top": 0
});
},
function() {
$(this).find('ul').css({
"display": "none",
"margin-top": 0
});
}
);
});
codepen
Use the mouseover() function to trigger the click. In this way the previous click event will not harm. User can use both hover and click/touch. It will be mobile friendly.
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})
In Bootstrap 5.x you can add a custom class like dropdown-hover to the main dropdown element. then manage hover events by JQuery.
$( document ).ready(function() {
// Add hover action for dropdowns
let dropdown_hover = $(".dropdown-hover");
dropdown_hover.on('mouseover', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.addClass('show');
toggle.addClass('show').attr('aria-expanded', true);
});
dropdown_hover.on('mouseout', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.removeClass('show');
toggle.removeClass('show').attr('aria-expanded', false);
});
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container p-5">
<div class="dropdown dropdown-hover">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
</div>
</body>
</html>
The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click.
Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems
$(function(){
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if(!is_touch_device() && $('.navbar-toggle:hidden')){
$('.dropdown-menu', this).css('margin-top',0);
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li>menuA</li>
<li>menuB</li>
<li class="dropdown">menuC
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>menuD</li>
<li>menuE</li>
</ul>
$(function(){
$("#nav .dropdown").hover(
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
},
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li>menuA</li>
<li>menuB</li>
<li class="dropdown">menuC
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>menuD</li>
<li>menuE</li>
</ul>
You implement this functionality by using Jquery:
$('.dropdown').on('mouseover', function(){
$(this).addClass('show');
$('.dropdown-menu').addClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'true');
});
$('.dropdown').on('mouseout', function(){
$(this).removeClass('show');
$('.dropdown-menu').removeClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'false');
});
Tested and Working Fine
<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
<div class="container" style="width:100%;">
<div class="navbar-header" style="height:90px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
<img src="material/logo.png" width="160px;" alt="visoka">
</a>
<a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
<img src="material/logo.png" width="200px;">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
<ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
<a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Ongoing Projects</li><br>
<li>Completed Projects</li><br>
<li>Upcoming Projects</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}
function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>
Bootstrap 5 with jquery version
Just add hoverable class to dropdown and add below code to main javascript file
// Hoverable dropdown
$('.dropdown.hoverable').on({
mouseenter: function(){
var dropdown = $(this).children('.dropdown-menu');
if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
},
mouseleave: function(){
var dropdown = $(this).children('.dropdown-menu');
if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
}
});