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();
Related
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.
When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.
Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it
In my case it was enough to add
e.stopPropagation();
I have five buttons, for each button, if you mouseover it, it will popup the dropdown menu (The default setting in bootstrap for dropdown is to click, but I need the button to achieve some other purposes when click the button, so I use a e.stopPropagation() to prevent the click popup action). In the css file, I set
.dropup:hover .dropdown-menu {
display: block;
}
My question is that, when I click the item in the dropdown menu, it will not hide anymore. Is there anyway to solve this issue?
Could you do something like this in place of your css so you don't have to rewrite functionality?
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
Reference: https://stackoverflow.com/a/21486327/1585362
I have a grid of buttons in my code where the user clicks on the word "click here" and the grid of buttons would be displayed. This uses jquery, what I want to know is that does anyone know a way so that the user can click on a text box and what happens is that the grid of buttons appear and if the user clicks on a button or clicks away from the grid, the grid disappear again. In other words I want it to work exactly how the Jquery datepicker works (to see the datepciker jquery please click here
To see my code then it is in jsfiddle, click here
Try this:
UPDATED
$('#showGrid').click(function(e) {
if ($('#gridone').css("display") == "table") {
$('#gridone').hide();
}
else {
$('#gridone').css("display", "table");
}
e.stopPropagation();
});
$("body").click(function() {
$('#gridone').hide();
});
$('#gridone input').click(function(){
$('.box INPUT').val($('.box INPUT').val() + $(this).val() );
$('#gridone').hide();
});
Example fiddle
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
}
});