I created a mobile menu with a toggle switch.
When I click on the div "dropdown-menu" it opens.
When I click again it closes. But i want it to open with one click and to close with double click.
What do I need to add to my code??
$('.dropdown-menu').click(function() {
$('.dropdown-menu').not(this).children('ul').slideUp("slow");
$(this).children('ul').slideToggle("slow");}
);
$('.dropdown-menu').blur(function() {
$('.dropdown-inside').hide('slow', function() {
});
});
Try to use dblclick,
$('.dropdown-menu').click(function() {
$('.dropdown-menu').children('ul').slideUp("slow");// slideUp all drop-downs
$(this).children('ul').slideDown("slow");// use slideDown instead slideToggle
});
$('.dropdown-menu').dblclick(function() {
$(this).children('ul').slideUp("slow");
});
To prevent sliding after clicking once try this,
$('.dropdown-menu').click(function() {
if( !$(this).children('ul').is(':visible')) {// slide, if ul is not visible
$('.dropdown-menu').children('ul').slideUp("slow");
$(this).children('ul').slideDown("slow");
}
});
Related
How can I edit my code so that the navbar closes when clicked outside of it but remain open if something inside of it is clicked?
$(document).ready(function() {
$('.nav-btn').on('click', function() {
$('.nav-btn').removeClass('active');
$(this).parent().find('.sub-menu').slideToggle();
$(this).toggleClass('active');
});
});
$(document).ready(function () {
$('.nav-btn').on('click', function (e) {
// Stop Document to be clicked when clicked in nav.
e.stopPropagation()
$('.nav-btn').removeClass('active');
var subMenu = $(this).parent().find('.sub-menu')
if (!$(".sub-menu").is(":visible")) {
$(this).parent().find('.sub-menu').slideToggle();
}
$(this).toggleClass('active');
});
// Toggle Sub Menu and remove active when Any vacant place is clicked
$(this).on('click', function (event) {
$('.nav-btn').removeClass('active');
$('.nav-btn').parent().find('.sub-menu').slideToggle();
});
// Prevent View close when Sub Items is clicked
$('.sub-menu').on('click', function (e) {
e.stopPropagation()
})
});
Hi, You just need to prevent the document click when clicked on the nav item and handle some additional things as done in the above code.
You can see Plunker example here also.
$(document).on('click', function (event) {
if ($(event.target).closest('.main-nav').length === 0) {
// Close button code
}
});
Another possible way is by wrapping all the content inside another div (except the header & navbar) and using the onclick tag:
<div onclick="hideNavbar()">
all your content goes here
</div>
function hideNavbar() {
$('.navbar-collapse').collapse('hide');
// getting the navbar div with jQuery
// and calling the function 'hide' of the Bootstrap class 'collapse'
}
I am working on a sidebar navigation: And the sidebar opens when we click on the toggle button and it stays open until we click again on the toggle button.
For the same sidebar I have a hover function : on mouseEnter sidebar opens and onMouseLeave sidebar closes.
The problem I have is with the closing the sidebar onClick. When I click close on the toggle button the sidebar stays open because the mouseEnter function is triggered.
I want the mouseEnter to be ready after the navbar close animation is finished.
Here is my code for the click event:
$('body').on('click', '.sidebar-toggler', function (e) {
var sidebar = $('.page-sidebar');
var sidebarMenu = $('.page-sidebar-menu');
if (body.hasClass("page-sidebar-closed")) {
body.removeClass("page-sidebar-closed");
sidebarMenu.removeClass("page-sidebar-menu-closed");
} else {
body.addClass("page-sidebar-closed");
sidebarMenu.addClass("page-sidebar-menu-closed");
if (body.hasClass("page-sidebar-fixed")) {
sidebarMenu.trigger("mouseleave");
}
}
and here is the code for the hover event:
if (body.hasClass('page-sidebar-fixed')) {
$('.page-sidebar').on('mouseenter', function () {
if (body.hasClass('page-sidebar-closed')) {
$(this).find('.page-sidebar-menu').removeClass('page-sidebar-menu-closed');
}
}).on('mouseleave', function () {
if (body.hasClass('page-sidebar-closed')) {
$(this).find('.page-sidebar-menu').addClass('page-sidebar-menu-closed');
}
});
}
Try to .off() the mouseenter event when the sidebar is opened with the toggle button.
http://api.jquery.com/off/
Suppose user goes to a ecommerce site and clicks on products, there is a submenu which drops down. What logic to write to ensure that when user clicks on any other blank space(or elements) that submenu is hidden back?
Check this js fiddle:-
http://jsfiddle.net/H3Vnw/3/
Here is the java script code:-
$(document).mouseup(function (e)
{
var container = $('.dropdown-menu');
if (container.has(e.target).length === 0)
{
container.hide();
}
});
$('.comment').click(function(){
$('.dropdown-menu').css({'display': 'block'});
});
If we click on the comment we can get drop menu if we click else where the drop menu will be hidden!
Hope this helps!
Wild guess: something that listens to anything but the submenu click, and closes it.
// assumption: submenu has open() and close() functions
submenu.open();
var listener = document.addEventListener('click', function(e){
// TODO: how to check if click is on submenu?
if (e.target != submenu) {
submenu.close();
document.removeEventListener('click', listener);
}
});
So I have your typical button to display the menu on mobile devices. The first code works great. Click the button and the menu opens and closes. The client wants the menu to close if you click on something other than the menu, including the button. Once I add the second code, the menu opens when you click on the button and closes when you click on the "content." But the menu doesn't close when you click on the button again. I've tried changing "toggleClass" to just "addClass" but it's the same issue. The button is not part of the menu so I'm kind of at a loss here. Can anyone help? Need I explain more?
$(document).ready(function(){
$("#mobile-menu-button").click(function () {
$("#mobile-nav").toggleClass("nav-open");
$(".mobile").toggleClass("to-left");
});
});
/* When Mobile Menu open, close by clicking other than menu */
$(document).mouseup(function (e) {
var container = $(".nav-open");
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.removeClass("nav-open");
$(".mobile").removeClass("to-left");
}
});
Working Demo : http://jsfiddle.net/TSC5N/1/
Update the JS like this :
$(document).ready(function(){
$("#mobile-menu-button").click(function () {
$("#mobile-nav").toggleClass("nav-open");
$(".mobile").toggleClass("to-left");
});
});
/* When Mobile Menu open, close by clicking other than menu */
$(document).mouseup(function (e) {
var container = $(".nav-open");
var button = $('#mobile-menu-button');
if (!container.is(e.target)
&& container.has(e.target).length === 0 && !button.is(e.target)) {
container.removeClass("nav-open");
$(".mobile").removeClass("to-left");
}
});
The problem was when you click on button, Menu will toggle and nav-open class will be added. But button is considered out side of the menu. So Now when you click again on button mouseup function will remove the class nav-open. But toggle event will fire and again same class will be added. So at the end menu will have nav-open class again.
Whats the fix :
!button.is(e.target) condition will check if the clicked item is button or not.
Use this code. http://jsfiddle.net/5gcSt/
$("#mobile-menu-button").click(function () {
if($("#mobile-nav").hasClass('nav-closed')){
$("#mobile-nav").addClass("nav-open");
$("#mobile-nav").removeClass("nav-closed");
$(".mobile").addClass("to-left");
}
else{
$("#mobile-nav").addClass("nav-closed");
$("#mobile-nav").removeClass("nav-open");
$(".mobile").removeClass("to-left");
}
});
/* When Mobile Menu open, close by clicking other than menu */
$(document).mouseup(function (e) {
var container = $(".nav-open");
var button = $('#mobile-menu-button');
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.removeClass("nav-open");
$(".mobile").removeClass("to-left");
}
});
I have a sidebar that is acting fine until i click on body.
Happening in sidebar
On click sidebar comes out and on mouseout it goes hidden.
when input box inside sidebar is focused then it is should not hide.
when input is not focused it follows step 1 nicely.
What i want-
When input is focused inside sidebar and at the same time when it is focused out because of body's input box focus then this sidebar should hide or on body click it should be hidden on action.
jQuery-
$(function(){
$('.sidebar-alert').on('click',function(){
$(this).animate({left:0},200);
event.stopPropagation();
});
$('.sidebar-alert').on('mouseleave ',function(){
if($(".focused-input").is(":focus"))
{
$('.sidebar-alert').show();
}
else
{
$('.sidebar-alert').animate({left:-295},200);
}
});
});
I am not able to bind mouseover and click for hiding sidebar.
JS fiddle
Updated fiddle
You can add the blur event for the input. That will take care of the issue that you have
$(".focused-input").on('blur', function() {
$('.sidebar-alert').animate({
left: -295
}, 200);
});
Check Fiddle
You can add one more event and selector in this part of code snippet like this:
$('.sidebar-alert, .focused-input').on('mouseleave focusout', function () {
if ($(".focused-input").is(":focus")) {
$('.sidebar-alert').show();
} else {
$('.sidebar-alert').animate({
left: -295
}, 200);
}
});