I am using a wordpress plugin that I have managed to change it a bit but I was thinking of making it expand onmouseenter and collapse onmouseleave but I am not sure how to edit it.
$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function(e) {
var $catParent = $(this).closest('li.cat-parent');
var state = 'opened'
$catParent.toggleClass(state);
$(this).nextAll('ul.children:first').slideToggle(state);
});
You need to bind a function to the div:
$( 'div you want to hover selector' )
.mouseover(function() {
$catParent.toggleClass(state);
})
.mouseout(function() {
$catParent.toggleClass(state);
});
jQuery Mouseover
Related
My current code is this:
$('.how-we-menu').on('click', function() {
$('.how-we-menu > ul').slideDown();
$('.under').on('click', function() {
$('.under > ul').slideDown();
})
$('.over').on('click', function() {
$('.over > ul').slideDown();
})
$('.ar').on('click', function() {
$('.ar > ul').slideDown();
})
$('.fc').on('click', function() {
$(this).children('ul').slideToggle();
})
});
I am trying to avoid slide toggle because it affects another element and slides both of them up so I want to make each element work individually. So when you click ".fc > ul" once it slides down and when you click again it slides up.
I hope this makes sense thanks!
Use $(this) in the function so it only affects the element you clicked on.
$('.fc').on('click', function() {
$(this).children('ul').slideToggle();
});
And all the event handlers should be at top level, not inside another event handler. Since they all do the same thing, you can bind them all at once.
$('.how-we-menu, .under, .over, .ar, .fc').on('click', function() {
$(this).children('ul').slideToggle();
});
I have tried these things without the use of a toggle and they work individually. However when i do a toggle nothing works properly please help.
$(document).ready(function() {
$(".nav-toggle").toggle(
function () {
$( '#menu' ).multilevelpushmenu( 'expand' );
},
function () {
$( '#menu' ).multilevelpushmenu( 'collapse' );
},
);
});
Nav toggle html simple button.
<p><a class="nav-toggle" href="#"><span></span></a>Menu</p>
The .toggle() you are using is a jQuery event. It works like a click of button/switch. toggle() (Event) event is deprecated in jQuery 1.8 and removed in jQuery 1.9. So this is invalid now.
Current .toggle() function changes the state of the element. Like .show() and .hide()
*Referred from this answer
$(document).ready(function () {
var state = false;
$(".nav-toggle").click(function () {
if(!state){
$('#menu').multilevelpushmenu('expand');
state = true;
}
else{
$('#menu').multilevelpushmenu('collapse');
state = false;
}
});
});
I'm trying to select a div for a click event but not the inputs within said div. I thought this would do it but it does not work. here is a demo. Thank you
html
<div id = "test"><input></div>
js
$('#test:not(input)').click(function(){
alert();
});
You could check to see if the clicked element is an input element using !$(e.target).is('input')
Updated Example
$('#test').on('click', function (e) {
var $target = $(e.target);
if (!$target.is('input')) {
alert('clicked');
}
});
When you click on the input, the click event bubbles to the div above it.
You can stop this by calling stopPropagation or stopImmediatePropagation on the event object.
http://jsfiddle.net/t66f06oL/1/
$( '#test' ).on( 'click', function() {
alert();
} );
$( '#test' ).on( 'click', 'input', function( e ) {
e.stopImmediatePropagation();
} );
When you click on the input control your click event is actually caught by the parent div. You can fix this by changing your code to this:
$('#test:not(input)').click(function(){
alert();
});
$('#test').find('input').click(function(e){
e.stopPropagation();
});
I am using following code to add line to my submenu :
$("li.mega-menu-megamenu a").hover(function(){
$( "<div class='remove'><hr /></div>" ).insertAfter("#mega-menu-primary-2 li:last-child" );
});
Its working perfectly fine.But the issue is that I want to remove that tag when there is no hover.
I have tried this : $("li.mega-menu-megamenu a").unbind('hover'); But by doing this, it will not add html tags at all.
How can I remove line when there is no hover on menu ?
You can use mouseout event for that
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").remove();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
});
Another possible solution is, instead of adding and removing the element you can just hide/show it.
$(document).ready(funnction() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
$(".remove").hide();
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").hide();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$(".remove").show();
});
});
I would opt for hide/show so you don't keep adding/removing from the DOM.
// Add the element to the DOM once and then hide it
var $removeElement = $( "<div class='remove'><hr /></div>" )
.insertAfter( "#mega-menu-primary-2 li:last-child" )
.hide();
// On mouseover we show the $removeElement and mouseout will hide it
$("li.mega-menu-megamenu a")
.hover(function(){ $removeElement.fadeIn(); },
function() { $removeElement.fadeOut(); }
);
I used fadeIn/fadeOut but you can use show/hide instead if prefered.
You can pass 2 functions to hover. Second will be called when mouse is exiting the element.
$("li.mega-menu-megamenu a").hover(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},
function() {
$(".remove").remove();
});
Another way:
$('li.mega-menu-megamenu a').on({
'mouseenter':function(){
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},'mouseleave':function(){
$(".remove").remove();
}
});
I have tried sooooo many different methods of this that others have suggested, but I don't understand what i'm doing wrong and really need some help. I have tried using various combinations of hover, mouseenter/mouseleave, on/off, bind/unbind.
Basically, I can get things to unbind, but I can't get them to bind again afterwards.
I put together a jsfiddle with a basic example. If you click the "Hover Off" button, mouseenter is disabled like intended. But then if you click the "Hover On" button after, mouseenter does not enable again.
http://jsfiddle.net/770b5p8q/3/
Here is "hover" functionality:
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
Here is what should enable/disable it:
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter");
$(this).bind("mouseleave");
});
});
$('.hover_disabled').click(function(){
$('.square').each(function(){
$(this).unbind("mouseenter");
$(this).unbind("mouseleave");
});
});
You should pass the function for binding and unbinding the handlers, something like:
var mouseEnterHandler = function () {
$(this).addClass('active');
}
var mouseLeaveHandler = function () {
$(this).removeClass('active');
};
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
$('.hover_enabled').click(function () {
$(this).addClass('active');
$('.hover_disabled').removeClass('active');
// I need to bind hover here
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
});
But the code becomes ugly and unmaintainable. You can use event delegation instead:
$(document).on('mouseenter mouseleave', '.square.hoverable', function(event) {
// toggle the class by checking the type of the event
$(this).toggleClass('active', event.type === 'mouseenter');
});
// caching the state changers
var $e = $('.hover_enabled, .hover_disabled').click(function () {
var $this = $(this).addClass('active'),
isHoverable = $this.hasClass('hover_enabled');
// exclude the clicked element from the set and remove the class
$e.not($this).removeClass('active');
$('.square').toggleClass('hoverable', isHoverable);
});
The above mouseenter mouseleave handler is only executed when the .square element has hoverable className. You can also remove the event handler and use CSS for styling.
.square.hoverable:hover {
}
http://jsfiddle.net/bztec1f4/
Once you rebind it back you need to pass function as well.
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
});