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/
Related
I'm trying to build a tricky navigation menu that needs to do the following:
When click in a nav item, .active class should be added to that item and removed from the previous one.
When one dropdown is open and you click to open another one the previous one should close and the new one should open in one click.
When click in a nav item it should open its respective dropdown container (at the moment it opens every dropdowns at once.)
and it should add .black-bg class to main-container underneath it.
When click anywhere outside the dropdown its active class .active should be removed as well as the class .black-bg in main-container underneath it.
JS
$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
$(this).toggleClass("active");
$(".showup").slideToggle(200);
$(".main-container").toggleClass("black-bg");
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".showup").slideUp(50);
});
This is what I came up with so far:
SEE DEMO
See demo here
I hope the above makes sense and someone could help me as I'm really stuck with this nav.
Thank you so much!
I recommend not using jQuery for this because of the exact issues you're running into. Try using Vue or Preact
However, if you insist on using jQuery, your click function should select the item that has "active", and modify it and its siblings accordingly.
https://codepen.io/anon/pen/aGwdXO
$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
if ($(this).hasClass("active")) {
return;
}
$(".active").parent().find(".showup").slideToggle(200);
$(".active").toggleClass("active");
$(this).toggleClass("active");
$(this).parent().find(".showup").slideToggle(200);
if (!$(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".active").parent().find(".showup").slideUp(50);
$(".active").toggleClass("active");
if ($(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});
Check this. Just add class showup1, showup2, etc and data-showup="1", data-showup="2" attr in each menu item. (Working in nav items 1 and 2).
$(".click").on("click", function(evt) {
evt.stopPropagation();
var showup = $(this).data('showup');
if(!$(this).hasClass('active')){
$('.active').removeClass('active');
$(this).addClass("active");
$(".showup").hide();
$(".showup"+showup).slideToggle(200);
$(".main-container").addClass("black-bg");
});
Run
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'm trying to make buttons in a side-bar navigation (using the bootstrap framewrk) close or collapse onclick.
If you follow the link below to see a working template you'll see what I mean - the left hand column has a button called "ShortCut" which if clicked allows a dropdown of other links which works great....
However....I'd like it so that when it is clicked again it closes and reverts to as it was originally...
http://seegatesite.com/bootstrap/simple_sidebar_menu.html
My thoughts are that it is something to do with javascript which is below:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
function initMenu() {
$('#menu ul').hide();
$('#menu ul').children('.current').parent().show();
//$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
The line below must be able to do what I am trying to do - I just cant figure it out...thanks for all help...
$('#menu li a').click(
nav-pills is only a css style that doesn't have a js actions.
Perhaps you're confused.
.
Possibly you can use Accordion(http://getbootstrap.com/javascript/#collapse-example-accordion) with nav-pill styling,
or use jquery .slideUp() and .slideDown() to get it done manually.
http://api.jquery.com/slideup/
http://api.jquery.com/slidedown/
.
The code you provided uses following part to collapse/open
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
I could be misunderstanding your question, but you can always hide a pill by removing the "active" class.
$('#item').removeClass('active');
can you please tell me how to get alert of id when user click of submenu.
Actually I am adding submenu of button click with id"menu_tc_1","menu_tc_2".I want to click of submenu ? and show alert ?
http://jsfiddle.net/eHded/1553/
$(document).on('click',".menuClick",function(){
alert('jii'+this.id)
})
You need to listen to clicks on the menu elements, not the entire menu.
$(document).on('click',".menuClick a",function(e){
alert('jii'+$(this).parent().prop('id'))
})
You click on the a so find it's parent's id
http://jsfiddle.net/eHded/1565/
Try this:
$(document).on('click', ".menuClick ul li > a", function () {
alert('jii' + $(this).parent().attr('id'));
});
Assuming you want the child elements that are added to the menu when you click the add button.
Edit: to add a selected class to the parent li element:
$(document).on('click', ".menuClick ul li > a", function () {
$(this).parent().addClass('selected');
});
Try this instead
$(document).on('click',".menuClick li",function(e){
alert('jii'+this.id)
$(".menuClick li").removeClass("active");
$(this).addClass("active");
e.stopPropagation();
})
This will solve your issue.
Demo
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