Let's suppose that I have the following dropdown after the last div, a dropdown menu appears once he clicks.
<div id="test"> Arrow </div>
I want the user to be able to click on this element and the dropdown appear but also if he mid clicks to be able to open this link directly in a new tab. In other words I want to prevent the default action onclick but still show the link of the element on hover or whatever.
Thank you
you can do
<div id="test"> Arrow </div>
with jquery 1.7+
$('#test a').on('click', function (e) {
if (e.which < 2) { // left mouse button
e.preventDefault();
// and code to show dropdown
}
});
Related
I have a menu which has to be toggled (open and closed). Also if one dropdown is open, and the user clicks on some other dropdown then, in this case, the opened one has to close. In the code which I have written, I am able to achieve the scenario of closing the dropdown if the user clicks on the next. But the dropdown does not toggle when clicked on the link. It only opens. But it has to also close when the same link is clicked.
Js code.
$('.header-nav-menu .header-menu a.menu-item').click(function(e) {
e.preventDefault();
$('.header-nav-menu .header-menu ').removeClass('show-menu-dropdown');
if ($(this).closest('.header-menu').hasClass('show-menu-dropdown')) {
$(this).closest('.header-menu').removeClass('show-menu-dropdown');
} else {
$(this).closest('.header-menu').addClass('show-menu-dropdown');
}
});
HTML code
<div class="header-menu third-level">
Who We Are
<li class="no-submenu">
<div class="menu-item">
Our Brand
</div>
</li>
</div>
You can try a boolean variable to save whether or not the class is present before removing it from all the menus. Something like this:
$('.header-nav-menu .header-menu a.menu-item').click(function(e){
e.preventDefault();
var hasClass = $(this).closest('.header-menu').hasClass('show-menu-dropdown');
$('.header-nav-menu .header-menu ').removeClass('show-menu-dropdown');
if (hasClass){
$(this).closest('.header-menu').removeClass('show-menu-dropdown')
}else{
$(this).closest('.header-menu').addClass('show-menu-dropdown')
}
})
I have a dropdown dropdown using ul and li:
<img class="options_toggle" src="assets/down_arrow.png"onclick="toggle_display('options');"/>
<ul id="options" class="options_content hide">
<li>
option one
</li>
</ul>
the options_toggle function swaps back and forth between the "hide" and "show" class in the options ul. Now I want to only hide it when the user clicks anywhere except the options toggle:
$(document).ready(function () {
document.onclick = function(e) {
// prevent the dropdown from closing instantly when you click the toggle to open it
$(".options_toggle").click(function (e) {
e.stopPropagation();
});
// hide the dropdown
$(".options_content").removeClass("show");
$(".options_content").addClass("hide");
};
});
But the problem is that the first time they load the page they have to click somewhere once before clicking the toggle. After the first click it works fine, they just have to click twice at first which can be annoying.
Any ideas what it's doing and why it cancels or ignores the first toggle? Thanks.
It's usually wrong to add an event handler inside another event handler. Just bind your $(".options_toggle").click() handler at top-level.
$(document).ready(function() {
$(".options_toggle").click(function(e) {
// prevent the dropdown from closing instantly when you click the toggle to open it
e.stopPropagation();
});
$(document).click(function(e) {
// hide the dropdown
$(".options_content").removeClass("show");
$(".options_content").addClass("hide");
});
});
I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});
Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.
I have a bootstrap navigation menu where I have also added a search icon. The search icon shows up the search box on click. Added a toggle in the search icon to show and hide the search box.
Now, when I click on the search icon and it is it open state showing the search box and then I click on any one of the dropdown menu in the navigation menu the dropdown appears over the search box.
I need to close the search box once any other dropdown menu is clicked. I know its very simple but but not getting a proper solution. Can anyone suggest?
Here is the link of the code:
JSFiddle
$('.tablet-toggle a').click(function (e) {
if($('ul.dropdown-menu.tablet-toggle').css('display') == 'block'){
$('.desktop-search').hide();
}
});
$(".search-icon").click(function () {
$("#searchForm form").slideToggle("fast", function() {
// Animation complete.
});
});
Check this out, updated Fiddle:
http://jsfiddle.net/uw08ddmm/7/
$('a.dropdown-toggle').click(function (e) {
$('.desktop-search').toggle();
});
You may try the following code:
Hide the search form when any dropdown menu in the navbar is clicked.
$('.navbar a.dropdown-toggle').click(function (e) {
// Use slideUp here to consist the animation behavior with slideToggle
$('#searchForm form').slideUp('fast');
});
Have you tried this?
window.onload = function(){
$('.nav li.dropdown').click(function(){
$('.desktop-search').hide();
});
};
You may try this: This will close the search box if click happens any other place of the page but on search icon:
<script>
$(document).ready(function(){
$(document).on('click',function(){
$('.desktop-search').hide();
});
});
</script>
Make sure that on Search Box open event the following line should be written:
event.stopPropagation();
I have a button its id is tools onclick it show a menu with some links and with click on other places of the page this menu will be hidden.
Every think work well but the menu don't hide when I click on the buttons (#up,#del,#tools)
$('#tools').click(function(){
var ofset = $(this).offset();
$('#moreMenu').css({'top':(ofset.top+35),'left':ofset.left,'display':'',});
return false;
});
$(window).click(function(){$('#moreMenu').hide();});
<div id='moreMenu' style='width:250px;background-color:#f0f0f0;border:2px solid gray;height:100px;position:absolute;display:none;'>some menu</div>
<button id='up' title='up' ><img src='../images/beta/up.png'></button>
<button id='del' title='del' ><img src='../images/beta/delete.png'></button>
<button id='tools' title='tools' style='width:70px;' ><img src='../images/beta/tools.png' style='margin-right:30%;'></button>
How can be hide on every elements!?
Just use the click event on html. It'll let you hide the div when you click anywhere inside the page.
$("html").click(function(){$('#moreMenu').hide();});
OR,
$(document).click(function(){$('#moreMenu').hide();});
A Thread Reference: $(window).click(..); not working in IE
Demo
That's because you need to add javascript to hide the menu when the buttons are pressed.
$("button").click(function(){$('#moreMenu').hide();});