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
Related
I have an onepage site with a responsive navigation script. Works great.
When you click on the Navigation button the "subnav" links show up. (These are anchors).
I need to toggle/close the subnav when clicking on a link/anchor.
Made an example here:
https://jsfiddle.net/fourroses666/jcj0kph2/
The script:
$(document).ready(function(){
$('nav').prepend('<div class="responsive-nav" style="display:none">Navigation</div>');
$('.responsive-nav').on('click',function(){
$('nav ul').slideToggle()
});
$(window).resize(function(){
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display','block');
$('nav ul').hide()
$('.responsive-nav').show()
} else {
$('nav ul li').css('display','inline-block');
$('nav ul').show()
$('.responsive-nav').hide()
}
});
$(window).resize();
});
You may tidy up your code a bit by doing the prepend and attaching the click handler all in one statement as below.
var $nav = $('#nav').
prepend('<div class="responsive-nav" style="display:none">Navigation</div>').
on('click', '.responsive-nav, ul a', function() {
$nav.find('ul').slideToggle()
});
Updated fiddle
Note: I used $nav.find('ul') to target the specific nav in question as opposed to other navs that may exist on the page.
Edit: To make it not disappear when on >= 768, replace $nav.find('ul').slideToggle() with the following.
if (evt.target.tagName === 'A' && $(window).innerWidth() >= 768) {
return;
}
$nav.find('ul').slideToggle()
Updated fiddle
I'm assuming you want the Nav to hide when you click on a link?
/* This executes when the nav or li (inside #nav) is pressed */
$('#nav').on('click', 'li, .responsive-nav', function(){
$('nav ul').slideToggle()
});
https://jsfiddle.net/jcj0kph2/1/
I have some filters on a project I'm working on that once clicked, it's given a class of active, which will then show a div inside the clicked list item called info-pane.
The filters are the 6 blue boxes. I am using the jQuery below to add and remove the active class, however the issue comes when I want to try and remove the active class by clicking the list item that has the active class state but it doesn't seem to work.
The code I'm trying;
$(".filters > ul > li").click(function() {
$(".filters > ul > li").removeClass("active");
$(this).toggleClass("active");
});
$(".filters > ul > li.active").click(function() {
$(this).removeClass("active");
});
Here's a link to the live project; http://client.n8geeks.com/
Try this:
$(".filters > ul > li").click(function() {
$(".filters > ul > li").not($(this).toggleClass("active")).removeClass("active");
});
First you don't need to make two events for that click. Here is example to do in one. But i can't see where your problem is. In your live project i can see that filters change after you click..?
$(".filters > ul > li").click(function() {
$(".filters").find('li').removeClass('active');
$(this).addClass("active");
});
Edit:
I don't know if i understood correctly, but i can see when you click on 'x' nothing happens.. so function that reset your filters.
(non-tested)
$(".close").click(function(){
$(this).closest('ul > li').find('input[type="checkbox"]').each(function( index ) {
$(this).prop('checked', false);
});
});
I have a simple jquery menu and I am trying to keep the submenu visible if a user hover overs it. so that I can select it if needed. However, when I get off the hover element the submenu will hide. Obviously, that's what I want as long as it's not also hovering over the submenu.
$(document).ready(function () {
$('.mainBar li a').hover(function(){
$(this).next().show() }, function () {
$(this).next().stop().hide()
});
});
http://jsfiddle.net/azxRX/1/
My opinion is to create this menus with css. Anyway i change a bit to this:
$('.sideBar > ul > li').bind('mouseover', openSubMenu);//This line sets it up so that when the mouse is moved over a li in myMenu, the function openSubMenu is called
$('.sideBar > ul > li').bind('mouseout', closeSubMenu);//This do exacly the same with the above but binds on mouseout instead.
function openSubMenu() {
///when the mouse rolls over the list item,
///the function looks for an unordered list within it.
///If one is found, it sets the style property display to block
$(this).find('ul').css('display', 'block');
};
function closeSubMenu() {
///This one does the oposite of openSubMenu function
$(this).find('ul').css('display', 'none');
};
fiddle
You can do this instead:
$(document).ready(function () {
$('.mainBar li').mouseover(function () {
$(this).find('.subBar').show();
console.log('over');
});
$('.mainBar li').mouseout(function () {
$(this).find('.subBar').hide();
});
});
This is the jsfiddle
Can someone help me adapt the following so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another of the top level menu buttons is hovered on?
jsfiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
});
});
Still getting my feet wet with jQuery/script coding.
NOTE: I'm using divs as part of the structure of the dropdown, as in the instance that "ul" above is replaced by a div.
FYI, I can't take credit for the above, it is the work of Pramod Sankar L (user PSL).
Any help would be appreciated!
Try
.mouseleave()
:has()
$(document).ready(function () {
$("li:has(ul)").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
}).mouseleave(function () {
$('li > ul').hide();
});
});
$("li:has(ul)") select li which contains ul
Fiddle Demo
Updated After Op's Comment
$(document).ready(function () {
$("#dropmenu li:has(div)").click(function () {
$('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
}).mouseleave(function () {
$(this).children('div').hide();
});
});
How can I do so that the menu does not ride up when I click inside subbmenyn?
(Subbmenu will go up when you click on the main link or outside.)
Can it be done without javascript?
Then the menu goes over and works with muse over if you do not have javascript enabled.
FIDDLE
CODE:
$('.nav > ul').toggleClass('no-js js');
$('.nav .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clicker')) {
$('.nav .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else {
$('.nav .js ul').hide();
}
})
Simply change the else to check that the clicked element isn't in that container, and that it's not the container.
Though you have several elements with the same Id, you should change them to a class
<div class="contentHolder">
so your jQuery would then be
else if (!$($elem).parents('.contentHolder').length && !$elem.hasClass('contentHolder')) {
And you'll need to update the CSS #contentHolder to .contentHolder
http://jsfiddle.net/6ddvq/5/