jQuery menu with click to show and hide on mouseleave - javascript

At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});

On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});​
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}

Related

Click outside to close dropdown only works when click outside <nav>

The following nav I'm building works just fine, however I noticed that when click outside the nav buttons but still inside <nav> container the open dropdown doesn't close as it should however it does close when click outside <nav>.
How can that be? Thank you for your help.
See Demo here
JQuery
$(document).ready(function() {
$(".click").on("click", function(e) {
var menu = $(this);
toggleDropDown(menu);
});
$(document).on('mouseup',function(e) {
var container = $("nav");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if ($('a.active').hasClass('active')) {
$('a.active').removeClass('active');
}
});
}
});
});
function toggleDropDown(menu) {
var isActive = $('a.active').length;
$('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
$(".main-container").removeClass("black-bg");
if (menu.hasClass('active')) {
menu.removeClass('active');
} else {
$('a.active').removeClass('active');
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
});
if (!isActive) {
menu.addClass('active');
menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
$(".main-container").addClass("black-bg");
});
}
}
You have to change your container, something like:
var container = $("nav .top-bar-section ul");

Menu should disappear when clicked somewhere else

I have a div which should be visible, whenever a button is clicked. It's like a menu. Afterwards, it should disappear (toggle), when the button is clicked again or when the user clicks somewhere else on the page (whole body).
In my current approach, the menu constantly toggles, so both functions (see below) are being triggered.
$("#b1").click(function() {
$("#menu").toggle("slide");
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
How should I improve my code, so that the menu only disappears when the button is clicked again or when the user clicks somewhere else?
Here is a fiddle.
Use $(window) to attach the event, then you can close the menu anywhere.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false;
});
$(window).click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
Check demo: https://jsfiddle.net/wru8mvxt/5/
You can use e.target and check whenever it's not the menu or the button which got clicked. Otherwise the menu closed even on the button click or on a click inside.
$("#b1").click(function() {
$("#menu").slideDown();
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
} else {
e.preventDefault();
}
});
If you want the menu to stay even on click inside, just add && !$(e.target).is("#menu") to the if condition.
Working example.
I think your code looks good.. I see one problem when you click on menu it will be hide.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false; // prevent to pass click event to body
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
$("#menu").click(function(e){
e.preventDefault();
return false;
});
Use something like this:
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
Try this.
$("#b1").click(function() {
event.stopPropagation();
$("#menu").toggle("slide");
});
$("body").click(function() {
if(!$(event.target).closest('#menu').length){
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
}
});
I think this code will solve your issue. You can use e.target property to find whether user clicked on button or outside button. When user click on button b1 it enters both b1 click event and body click event. So if in order to find where the user is clicked you can use event.target property.
Clicking the button will toggle the menu visibility.
Clicking outside the button will close the menu if it is opened.
$("#b1").click(function() {
$("#menu").toggle("slide");
$("#b1").text() == "hide menu" ? $("#b1").text("show menu") : $("#b1").text("hide menu");
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
}
else {
e.preventDefault();
}
});
Working fiddle
You have to do following changes.
$(document).ready(function() {
$("#b1").click(function(e) {
$("#menu").slideToggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#menu, #menu *')) {
$("#menu").slideUp();
}
});
});

Replicating a select element with a checkbox ul (jQuery)

I'm trying to transform a fieldset with one legend and one UL of checkboxes/radio as a select html element. I know, it sounds bad and doesn't really make sense, but let's just say I have to do it.
I have a jsfiddle https://jsfiddle.net/demj49st/
The problem is that I have some issues replicating the click behavior of the select element. I don't find the right selector to make it so a click on a checkbox wont make the fake select box disappear.
(function($) {
$(document).ready(function() {
$('fieldset legend').on('click', function() {
var $this = $(this);
$this.toggleClass('active');
$this.next().toggleClass('visible');
})
$(document).on('click', function (e) {
if($('ul').hasClass('visible') && !$('fieldset legend').is(e.target)) {
$('ul').removeClass('visible');
$('legend').removeClass('active');
}
});
})
})(jQuery);
$(document).ready(function() {
$('fieldset legend').on('click', function() {
var $this = $(this);
$this.toggleClass('active');
$this.next().toggleClass('visible');
});
$(document).on('click', function (e) {
if (!$("fieldset > ul , fieldset > legend").is(e.target) // if the target of the click isn't the container...
&& $("fieldset > ul , fieldset > legend").has(e.target).length === 0) // ... nor a descendant of the container
{
$('fieldset > ul').removeClass('visible');
}
});
});
DEMO

document click to hide menu

My document click function isn't hiding my menu when I click the document outside of my menu. When I click the img it shows the menu and when I click the img again it hides it but when I document click I want it to hide the menu does any one know what I'm doing wrong and how to make it work.
var visible = false;
var id = $(this).attr('id');
$(document).not('#' + id + ' div:eq(1)').click(function () {
if (visible) {
$('.dropdownlist .menu').hide();
visible = false;
}
});
$(this).find('div:eq(1)').click(function (e) {
var menu = $(this).parent().find('.menu');
if (!visible) {
menu.show();
visible = true;
} else if (visible) {
menu.hide();
visible = false;
}
menu.css({ 'left': $(this).position().left + $(this).width() - menu.find('ul').width(),
'top': $(this).position().top + $(this).height() });
})
I had a similar problem and solved it with the following code:
$("body").mouseup(function(){
if (visible) {
$('.dropdownlist .menu').hide();
visible = false;
}
});
instead of your $(document).not(.. code.
//add event.stopPropagation() when the user clicks on a .menu element
$('.menu').on('click', function (event) {
//.stopPropagation() will stop the event from bubbling up to the document
event.stopPropagation();
});
//add the click event handler to the image that will open/close .menu elements
$('img').on('click', function (event) {
//we call .stopPropagation() again here so the document won't receive this event
event.stopPropagation();
//cache .menu element
var $div = $('.menu');
//this if statement determines if the .menu should be shown or hidden, in my example I'm animating its top property
if ($div.css('top') == '-50px') {
$div.stop().animate({top : 0}, 250);
} else {
$div.stop().animate({top : '-50px'}, 150);
}
});
//add click event handler to the document to close the .menu
$(document).on('click', function () {
$('div').stop().animate({top : '-50px'}, 150);
});
jsfiddle: http://jsfiddle.net/jasper/n5C9w/1/

jquery slide an element up and down on click

I am trying to slide an element down when another is click and if that link is then clicked again, slide the element back up, is there a cleaner way of doing it than this?
$("#dropdown, #dropdown span, #dropdown dt a").click(function(event) {
$("#dropdown dd").slideDown(defaults.speed);
$("#dropdown").addClass('drop_down_open');
event.preventDefault();
});
$(".drop_down_open, .drop_down_open span, .drop_down_open dt a").click(function(event) {
console.log("hello");
$("#dropdown dd").slideUp(defaults.speed);
event.preventDefault();
});
$("#anElement").click(function(e) {
var theItem = $("#dropdown dd");
if (theItem.css("display") == none) {
theItem.slideDown(defaults.speed);
}
else {
theItem.slideUp(defaults.speed);
}
e.preventDefault();
});
Modify according to your specific needs.
Is this what you wanted. http://jqueryui.com/demos/accordion/

Categories