I have found a tutorial on some dropdown menu using jquery. It works fine but I want to adjust it just a little. Instead of hiding the menu using hovering, I want to have the same button that showed the menu, to hide it when it is being pressed again. So the same button has to both hide and show the dropdown menu.
The script that im using:
$(document).ready(function () {
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function () { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function () {
}, function () {
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function () {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function () { //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
Use jQuery's .toggle() http://api.jquery.com/toggle/
$("#yourbutton").click(function() {
$("#yourmenu").toggle();
});
You can save yourself from adding a CSS rule by using jQuery's .toggle method.
$('#yourMenu').toggle()
This will hide it if it's visible, and show it if it's hidden. You can add a number or 'fast', 'slow' as a parameter to make it animate.
jQuery.toggle() function will do this work for you:
$("#button").on('click', function() {
$("#menu").toggle();
});
Yes, toggleClass can be used. Or you can also define your own toggle function in javascript.
you can toggle between the classes or do any other function you want to.
function tog(elemen){
if(elemen.className == "show") {
hide drpdwn
elemen.className="hide";
} else {
make dropdwn visible
elemen.className="show";
}
}
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();
}
});
});
I'm using Jquery to display a dropdown menu onMouseEnter a navigation link, I wrapped onMouseEnter with hoverIntent:
https://github.com/briancherne/jquery-hoverIntent (used to control sensitivity of OnMouseEnter without using OnMouseOut as that's not what I want):
I want jquery code to close dropdown menu when clicked outside of that dropdown menu or onMouseEnter another navigation link.
Codepen:
https://codepen.io/anon/pen/zNPbRp
JSFiddle: https://jsfiddle.net/6jc6pjLu/1/
Structure:
-I have two navigation links that carry a dropdown menu, one with a class MySecondLink, the other with a class MyThirdLink.
-Dropdown menus, one with a class MySecondLinkTabLinks, the other with a class MyThirdLinkTabLinks
jQuery Process:(onMouseEnter a navigation link, replace class value "PopupClosed" with "PopupOpen" on navigation link for styling purposes, and replace display:none; with display:block; on dropdown menu to show it) that is the process of displaying the dropdown menu, Closing it (replace PopupOpen with PopupClosed on navigation link and replace display:block; with display:none; on dropdown menu) :
jQuery(document).ready(function($) {
var config = {
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback
/* Don't want onMouseOut from hoverIntent */
// timeout: 0, // number = milliseconds delay before onMouseOut
// out: doClose // function = onMouseOut callback
};
function doOpen() {
$(this).removeClass('PopupClosed').addClass('PopupOpen');
var cls = $(this).data('target'); // fetch data-target value.
$('.Menu.' + cls).css('display','block'); // will make display block
}
/* Commented out because I want to apply another approach for closing the menu as doClose() depends only on mouseOut.
function doClose() {
$(this).addClass('PopupClosed').removeClass('PopupOpen');
var cls = $(this).data('target'); // fetch which class to target.
$('.Menu.' + cls).css('display','none'); // will make display none
}
*/
$(".navTab.Popup").hoverIntent(config);
});
As you want to keep submenus visible until clicked outside of that submenu. You need to do followings:
Remove out: doClose from config so that your submenus stays visible after hover menu items.
But you need to add $('.Menu').hide(); top of the function function doOpen() {....}
Add these script which will allow to hide opened submenus on body click.
$(document).click(function(event) {
$('.Menu').hide();
});
https://codepen.io/avastamin/pen/XpzQXB
I have two button start and stop. on page load stop button hide and start button show.
when i click start button this button hide and stop button show.
i am using .hide() method.
Jquery Code:
$(window).load(function ()
{
$('#stop').hide();
});
It's working but issue is when page load this (stop button) will show for a second(like a blink) and then hide. i want to hide completely mean i don't want to show stop button when page load.
Hide it once only the button has loaded, not the whole window.
$("#stop").load(function() {
$(this).hide();
});
Otherwise you can always use CSS to hide it with display:none;
Maybe use CSS :
#stop { display: none; }
It is because you have used the load event handler, So till all the resources of the page is loaded the script is not executed.
One possible solution is to use a css rule, with the id selector to hide the element like
#stop{display: none;}
$(document).ready(function () {
$("#btnStop").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnPlay").show();
})
$("#btnPlay").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnStop").show();
})
})
I've looked around and researched why this isn't working, but it seems that I am in a sort of different situation.
I have a default action for a navigation item that handles the navigation animation on hover:
$('.logoCont').hover(function(){
someFunction()...
}, function (){
someFunctionReverse()...
});
Now, when it comes to being on the mobile screen, I hide the navigation and place a button there. The button then controls the animation of the menu sliding out from the side. I've added a line of code that adds a class to the navigation elements when this button is clicked.
$('.mobile-menuButton').click(function(){ //When you click the menu-show button
if($(this).hasClass('menuClosed')){ //Check to see if the menu is closed
$('.nav_hover').addClass('mobile_open'); //Add the mobile_open class to the navigation items
} else {
$('.nav_hover').removeClass('mobile_open'); //remove it
}
});
So then I changed the first hover function to say:
$('.nav_hover').not('.mobile_open').hover(function(){
someFunction()...
}, function (){
someFunctionReverse()...
});
I was hoping this would stop the someFunction() from happening when the mobile menu is out.
You can view what I'm doing HERE - When you reduce the screen to under 540px the media query will take effect and you can click on the menu button.
Documentation on .not() HERE. The second example at the end of the page is exactly what I was hoping for.
The class is added later and the event handler is attached to any and all elements that match the selector at pageload (or whenever it is executed) and doesn't really care about what you add later.
You have to check for the class inside the event handler
$('.nav_hover').hover(function(){
if ( !$(this).hasClass('mobile_open') ) {
someFunction()...
}
}, function (){
if ( !$(this).hasClass('mobile_open') ) {
someFunctionReverse()...
}
});
delegation could also work, but it wouldn't really work with not() or hover()
$(document).on({
mouseenter: function() {
someFunction()...
},
mouseleave: function() {
someFunctionReverse()...
}
}, '.nav_hover:not(.mobile_open)');
I have three buttons on screen, only one of the three have a class called 'show_hide'. When 'show_hide' is called, it make a div show. However the other two buttons do not make reset show_hide to hidden.
How do I make the other two buttons reset the show_hide to hidden when they are pressed?
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
$(".show_hide").hide();
});
Maybe you could had a class to your other button '.hideBtn' and catch the click to do the hide:
$(".hideBtn").click(function(){
$('.show_hide').hide();
})