I am using this Wordpress theme, called ichiban.
I have made some custom menu items that links directly to sections on the same page. For these cases I would like the whole menu to un-toggle when the < li > item is clicked. This is the code I have been working on;
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$('.site-overlay-wrapper').hide();
});
});
For now, this code only hides the open menu, the menu button does not reset, and it is not possible to re-ope the menu. Please help me getting this code correct.
SOLUTION
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$("body").removeClass("overlay-open");
});
});
Thank you all :)
You can try using jQuery .toggle() method.
Change this line:
$('.site-overlay-wrapper').hide();
To:
$('.site-overlay-wrapper').toggle();
This help?
jQuery( document ).ready(function($) {
var t = true;
$('#menu-main li a').on("click", function(){
if(t===true){
$('.site-overlay-wrapper').hide();
t=false;
}
else{
$('.site-overlay-wrapper').show();
t=true;
}
});
});
Here is working example:
jQuery( document ).ready(function($) {
var t = true;
$('#button').on("click", function(){
if(t===true){
$('.show').hide();
$(this).text("SHOW");
t=false;
}
else{
$('.show').show();
$(this).text("HIDE");
t=true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">CLICK</button>
<div class="show">HAPY NEW YEAR!!!</div>
You also can have a problem with $('#menu-main li a'). That a tag is wrong. You need to point click statemant to button class directly because you hide your menu on any a tag inside any li.
Related
I'm trying to remember which tabs were open in my menu after reload. Here's my js:
$(document).ready(function () {
$(".sidebar div").hide();
$(".sidebar li a").click(function () {
// alert($(this).attr("class"));
var myClass=$(this).attr("class");
if ($("#div"+myClass).attr("class")!='active') {
$("#div"+myClass).slideToggle(); //open tab
$("#div"+myClass).addClass('active');
}
else {
$("#div"+myClass).slideToggle(); //close tab
$("#div"+myClass).removeClass('active');
}
});
});
It's constantly adding and taking away the class "active" each time I click on it. I also have this right below it:
$(window).load(function () {
$(".active").slideToggle();
});
Whenever I reload my page, even when a couple of tabs have an active class, they do not appear to be slideToggling. Am I doing this wrong? Is there an easy way around this?
I want the current content to slideUp and then slideDown the clicked content and I am stumped on why the code I have won't work. It just slides down the text . content. Any help much appreciated!
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
$(".contentContainer").html('.content');
}).slideDown(1500);
});
});
});
When you do .html('.content'), you're telling jQuery to literally make ".content" the innerHTML of the container (ex.: div or span with class .contentContainer).
It's a little unclear what content you are trying to place in .contentContainer, but assuming it is the html of the first tag with the class ".content", you could use this:
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
// Change this line...
$(".contentContainer").html($('.content').html());
}).slideDown(1500);
});
});
});
Edit: Updated to make it take the content of the first tag with the class ".content".
http://jsfiddle.net/nn0x6da8/2/
I'm having a bit of trouble with a dropdown menu that triggers fadeOut as soon as the mouse leaves the grandparent div, I've searched this problem to death and have yet to find an elegant solution. Here is my code : link
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function(){
$('ul li ul').fadeOut('400');
});
}
$(document).ready(main);
DEMO: MY FIDDLE
You need to specify what element(s) you are trying to attach the event to. By adding '>' youre forcing to only attach the event to that element's children. Try this:
var main = function() {
$('nav').mouseenter(function() {
$(this).find('ul').fadeIn('400');
});
$('nav>ul>li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
FIDDLE
$(this).find('ul').fadeOut('400');
is correct as $('ul>li>ul').fadeOut('400'); Could not target specific (current) li.
Use following hierarchical flow of TAGS
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
I'm in the process of modifying a responsive tabs to accordion, please see the jsfiddle
When the current 'active' tab is clicked it hides which I understand is what it is meant to do in the code, however I would like it if this does not happen and doesn't hide. Here is the current javascript:
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
} else {
$('#nav .is-open').removeClass('is-open').hide();
$(this).removeClass('active');
}
});
It's basically just applying classes dependent on what is clicked and what is currently active or not. I guess I need to change the logic of this?
If what I understood is correct that you want to stop hiding the active div when clicked again. Just remove the else part...
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
}
});
Check this Fiddle
In the below code I have a couple of unordered lists, and in the plugin I am attempting to fire a click event when the li element is clicked. How can I do this inside the plugin and still have access to the main ul jquery object?
See comments in code for further explanation
<ul class="testing">
<li>clicking this should fire a click event</li>
</ul>
<ul class="testing">
<li>clicking this should fire a click event</li>
</ul>
(function($) {
$.fn.myPlugin = function(options) {
return this.each(function() {
//how should I trigger the onClick when the li is clicked???
});
function onClick(){
console.log('you clicked an li');
//I also need access to the main ul element inside here
}
}
})(jQuery);
$(function() {
$('.testing').myPlugin();
});
(function($) {
$.fn.myPlugin = function(options) {
return this.find('li').click(onClick)
function onClick(){
console.log('you clicked an li');
$(this).parent(); // This is the <ul>
}
}
})(jQuery);
$(".testing").myPlugin()
Copy the following example and see if this helps solidify what you are attempting to accomplish.
The proof of getting to the main ul tags are the alerts. You will see I have created 'testing1' and 'testing2' classes. Depending on which li tag is clicked, the user will receive an alert of what class is associated to the parent ul tag of the clicked li tag.
I hope this helps!
<ul class="testing1">
<li>clicking this should fire a click event</li>
</ul>
<ul class="testing2">
<li>clicking this should fire a click event</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul')
.on('click', 'li', function() {
$(this).myPlugin();
});
});
$.fn.myPlugin = function(options) {
return this.each(function() {
//how should I trigger the onClick when the li is clicked???
onClick(this);
});
function onClick(jqObj) {
console.log('you clicked an li');
//I also need access to the main ul element inside here
alert($(jqObj).parent('ul').attr('class'));
}
}
</script>