i have a horizontal list menu which when clicked toggles the visibility of a nested list. the function almost works, i click the menu and the visibility toggles. however, when i click inside the element that has just appeared, the visibility of the nested list reverts back to original state and is hidden. this is a bit difficult when the elements require an interaction (whether it's a form or another menu).
Here's the code i've got so far:
/* menu */
var menu = function(clicktarget, dropdown){
$(clicktarget).click( function(event){
// stop bubbling
event.stopPropagation();
//show
$(dropdown).toggle();
return false;
});
$('body').not($(dropdown)).click( function(){
//hide when click anywhere out the menu
$(dropdown).hide();
return false;
});
}
menu($('#loginAcc'),$('#auth-menu'));
As you can see i have tried using the .not() function in an attempt to remove it, but nothing changes and the dropdown still gets removed when it's clicked.
Try
$('body').click( function(e){
//hide when click anywhere out the menu
var $target = $(e.target)
if(!$target.closest(dropdown).length){
$(dropdown).hide();
}
return false;
});
Related
I have a simple dropdown list, I want when the user toggles the dropdown list to show or hide another div using the jquery method slideToggle, unfortunately, I am struggling to solve the problem.
Expected: when the user clicks an icon it should show the list and hide another div (slideDown effect) when the user clicks again for closing the dropdown list (slideUp effect), I want to show the hidden div.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
console.log('do something')
if("slideDown"){
$('.dezynfekcja-dropdown').hide();
}else if("slideUP"){
$('.dezynfekcja-dropdown').show();
}
});
});
I tried adding a callback function but I don't know how to check the slide effect if it's slideDown or slideUp.
Any idea will be appreciated.
Once toggle finishes it basically hides or shows the element being toggled. So in the complete callback you can simply check if your element is shown or hidden.
var link = $('.sprzatanie-link');
link.click(function(e) {
e.preventDefault();
list.slideToggle("fast", function(){
// `this` refers to the DOM element being toggled.
// We can use `is(":visible")` to check if it visible or not
let isVisible = $(this).is(":visible");
// show console message that tells us if element is hidden or visible
console.log(this.innerText, ' is now ', isVisible);
// use isVisible to do whatever you want show/hide etc
if(isVisible) {
$('.dezynfekcja-dropdown').hide();
} else {
$('.dezynfekcja-dropdown').show();
}
});
});
This question already has answers here:
jQuery drop down menu closing by clicking outside
(7 answers)
Closed 8 years ago.
I have a simple Dropdown menu that I am showing on inline text links. I am using jQuery click event to show the Dropdown menu when a link is clicked on.
What I would like to do is have the Dropdown menu go back to a hidden state when a click anywhere is made. Right now you have to click the link again to close the menu.
Demo http://codepen.io/jasondavis/pen/sFpwK?editors=101
jQuery
// Show Dropdown Menu when link is clicked
$(function(){
$(".inline-dropdown-menu").click(function(e){
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
});
});
HTML
<span class="inline-dropdown-menu">
My Link that reveals a DropDown Menu when clicked on<span class="caret"></span>
<ul class="inline-dropdown-menu-list">
<li class="bottomBorder">
alphabetically
</li>
<li>
2. the first report, alphabetically
</li>
<li>
3. the first report, alphabetically
</li>
</ul>
</span>
http://codepen.io/anon/pen/JmLsB
$(function () {
$(".inline-dropdown-menu").click(function (e) {
$(".inline-dropdown-menu-list").hide(); // to hide other drop down
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
});
});
// to hide drop down if you click other than inline-dropdown-menu class
$(document).click(function (e) {
var container = $(".inline-dropdown-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".inline-dropdown-menu-list").hide();
}
});
This might be useful:
var flag = false;
$(".inline-dropdown-menu").click(function(e){
$(".inline-dropdown-menu-list").not(':hidden').hide();
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
flag = true;
});
$('body').click(function(){
if (flag) {
flag = false;
return;
}
$(".inline-dropdown-menu-list").not(':hidden').hide();
});
try this
$(function(){
$(".inline-dropdown-menu").click(function(e){
e.stopPropagation();
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
});
$("body").click(function(e){
$(".inline-dropdown-menu-list").hide();
});
});
When your link is clicked, you will have to add a click event to body. When body is clicked, you can hide your dropdown, and also remove the event on body again. I used an setTimeout to prevent double click. I also add a namespace to the click event on body (click.ddls), so you can have other click events.
So check this demo out: http://jsfiddle.net/gdxyef46/2/
// Show Dropdown Menu when link is clicked
$(function(){
$(".inline-dropdown-menu a").click(function(e){
e.preventDefault(); // Stop navigation
$("body").off("click.ddls");
$(".inline-dropdown-menu-list").toggle();
//to prevent double click
setTimeout(function(){
$("body").on("click.ddls", function(){
console.log("body clicked");
$(".inline-dropdown-menu-list").hide();
$("body").off("click.ddls");
});
}, 300);
});
});
without unique class names, you could loop through them and check if they are visible and if so , close it. This code isn't working (apologies), but will hopefully point you in the right direction. I personally like to use on("click") vs click() in case you are dealing with dynamic elements that the DOM doesn't have access to yet.
$('*').not(".inline-dropdown-menu").on("click", function(){
$('.inline-dropdown-menu-list').each(function() {
if ($(this).is(":visible")) {
$(this).toggle();
}
});
You could also create a counter based on $('.inline-dropdown-menu-list').length and assign a data-id to each so you can match and keep track of them. Hope this helps.
If I understand you correctly you want to to replicate what the drop down arrow is doing, when you click on the body. If that is so, then try this:
$("body").click(function(e){
$('.inline-dropdown-menu.open ').find('.inline-dropdown-menu-list:first').toggle();
});
link to demo.
But do note that if you click the body again it will again show the drop down. You can play around to remove that if you don't want that.
I'm trying to achieve something similar to the bootstrap button drop downs (http://twitter.github.io/bootstrap/components.html#buttonDropdowns) but need something lightweight. Basic functionality is more or less this:
On clicking the link, corresponding dropdown div opens (works)
On clicking another link, the previous dropdown closes as well as the css class is removed (works)
On clicking on the link of the opened dropdown, close the dropdown (does not work (closes and reopens))
On clicking anywhere in the body (so outside the link and dropdown), close the dropdown (does not work)
What should be the logic behind this?
Demo: http://jsfiddle.net/fU2BZ/
Does the code below make sense?
$(document).click( function(){
$('.dropdownbox').hide(0);
$('.dropdown').removeClass('active');
});
$('.dropdown').click( function(event){
event.stopPropagation();
$('.dropdown').removeClass('active');
$('.dropdownbox').hide();
$(this).addClass('active').find('.dropdownbox').slideToggle(200);
});
Made some changes to your code, added some if else logic, seems to work.
fiddle: http://jsfiddle.net/fU2BZ/1/
Code:
$('.dropdown').click( function(event){
event.stopPropagation();
if ($(this).hasClass("active")) {
$('.dropdown').removeClass('active');
$('.dropdownbox').hide();
} else {
$('.dropdownbox').hide();
$(this).addClass('active').find('.dropdownbox').slideToggle(200);
}
});
You were pretty close. I'd store a flag if it was visible (so that you don't double-up on the same code)
$('.dropdown').click( function(event){
event.stopPropagation();
var active = false;
if ( $(this).hasClass('active') )
active = true;
$('.dropdown').removeClass('active');
$('.dropdownbox').hide();
if ( ! active )
$(this).addClass('active').find('.dropdownbox').slideToggle(200);
});
jsFiddle: http://jsfiddle.net/fU2BZ/4/
Simple code to resolve your third issue:
$('.dropdown').click(function (event) {
event.stopPropagation();
$('.dropdown').removeClass('active').not(this).find('.dropdownbox').hide();
$(this).toggleClass('active').find('.dropdownbox').slideToggle(200);
});
To resolve your last issue, do this:
$('.dropdownbox').click(function (event) {
event.stopPropagation();
});
I've created a mobile dropdown menu for a responsive website, that essentially shows a hidden unordered list when you click on a certain element. It works great, except for the fact that I can't get the blur() function to work, so that when a user clicks anywhere on the page other than inside the menu, it hides the menu. Here's a codepen: http://codepen.io/trevanhetzel/pen/wIrkH
My javascript looks like so:
$(function() {
var pull = $('#pull');
menu = $('header ul');
$(pull).on('click', function(e) {
e.preventDefault();
$('.close-menu').toggle();
$('.mobi-nav span').toggle();
menu.slideToggle(250);
});
$(menu).blur(function() {
$(this).slideToggle();
});
});
I've struggled with blur() in the past, so would really like to figure out once and for all how exactly it works, and whether or not I'm using it in the right context here. Thanks!
You have to watch for clicks yourself. And use $.contains to see if the clicked thing is within your menu:
$(document).click(function (ev) {
if (ev.target !== menu.get(0) && !$.contains(menu.get(0), ev.target)) {
menu.slideUp();
}
});
Just be sure to call ev.stopPropagation() in your toggle click handler to prevent the handler above from immediately closing the menu when the event bubbles up.
We've got the classic problem with a div's child getting clicked and the parent's click event gets triggered as well. I've got a button set within a container that expands and unexpands upon clicking.
The button, when clicked, should:
Unexpand the container
Hide the container's description
The two click functions are given below:
var $NotificationContainer = $("#NotificationContainer");
$NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');
var $thisNotification = $NotificationContainer.children('.Notification[title='+uniqueTitle+']');
$thisNotification.append('<div class="NotificationDescription">'+uniqueDescription+'</div>');
$(".NotificationDescription").hide();
// Button used to close an expanded notification
$thisNotification.append("<div class='NotificationCloseButton'></div>");
$('.NotificationCloseButton').hide();
$thisNotification.click(function()
{
$(this).animate({height:250}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
});
$(".NotificationCloseButton").click(function()
{
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
});
What I find with this code is that when clicking the close button:
SlideToggles the description to be hidden
SlideToggles the close button to be hidden
The container unexpands, but then re-expands (contents still hidden)
The $thisNotification click is being called (I think).
Now, when I try to use event.stopPropagation(); or a simple return false; in the closeButton's click, I get very interesting results.
Clicking the close button with either of the above additions now:
Unexpands the container
The description and button remain present, and do not slideToggle at all.
Code snippets of the exact way I implemented stopPropogation and return false:
$(".NotificationCloseButton").click(function(event)
{
event.stopPropagation();
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
});
and
$(".NotificationCloseButton").click(function()
{
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
return false;
});
You have click bindings for a the parent object:
$thisNotification
and for a child object:
$(".NotificationCloseButton")
When you click the close button, the 'click' event is being fired for both handlers, all animations are queued, and you get the undesirable closes-then-opens action.
You have a few options to resolve this. #1 is to unbind the parent click handler and rebind it after the close button is clicked.
$thisNotification.click(function()
{
notificationClickHandler(); //animations are separated from bindings
$thisNotification.unbind('click');
});
Alternately, jQuery has a .clearQueue() method that removes all queued animations. This might have side-effects when users are quick with the mouse, or if your page is heavy on jQuery animations, so you'll have to experiment with the appropriate level of scope for your application.
$(".NotificationCloseButton").click(function()
{
$thisNotification.animate({height:50}, 1000);
$(this).find('.NotificationDescription').slideToggle('fast');
$(this).find('.NotificationCloseButton').slideToggle('fast');
$.clearQueue();
});