I want menu close when click on the link or on ul.
I am using this menu.
You can remove the active class whenever an li in the #menu is clicked like that:
$('#menu li').on('click', function() {
$("#menu,#trigger").removeClass("active");
});
Related
I want to toggle navbar when navigating with mobile when the user clicks each one of the navbar items except one which is a dropdown.
I am using this code:
$('.nav a').on('click', function(){
$('.navbar-toggle').click();
});
The problem is that this code toggles the navbar with each item of the navbar on click. However, when I click the dropdown in the navbar, the navbar toggles and the user cannot see items in the dropdown.
I used this and it worked:
$('.nav :not(.dropdown) a') .on('click', function(){
$('.navbar-toggle').click();
});
I need to make a menu ul li that toggles open and close with some javascript. I have code as a link.
Section
kategori
Section
kategori
kategori
It's really the nested ul you want to be showing, when you click the parent li, so your click handler was wrong, slightly. I also updated some styles to get this to work a little better.
https://jsfiddle.net/8qb468bu/1/
$(document).ready(function(){
$('#categories li').click(function() {
$(this).find('ul').toggleClass('selected');
});
});
I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.
Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements
The navbar on the right collapses when the window is resized, but when I click the toggle button the menu appears. When I click any link, the bar doesn´t "un-toggle"... Can anybody help me?
Site here
Having the menu collapse when a link is clicked is not the default functionality of the expand/collapse menu with bootstrap. If you want it to function that way, you have to bind the hide function .collapse('hide') to the click action for those links.
You can do so by including this:
jQuery(function($){
$('.navbar-default .navbar-nav > li > a').click(function() {
$('.navbar-default .navbar-collapse').collapse('hide')
});
});
Does anyone know how I can expand on the function at the moment, so that when one navigation is open, when the user clicks to open the other navigation, the navigation which is open presently collapses?
Please find the code below;
http://jsfiddle.net/N7xgC/
What you're currently doing is toggling the display of all elements with the sub class, so clicking on any link will display all of the sub menus. Instead, you want to hide all of the elements with the class sub that aren't a sibling of the link being clicked on, and then toggle only the element with the class sub that is a sibling of the link being clicked on.
$(document).ready(function() {
$('.main > li > a').click(function() {
var sibling = $(this).siblings('.sub'); // select the <ul> to exclude
$('.sub').not(sibling).hide(); // hide everything except that element
sibling.toggle(); // toggle that element
});
});
Updated jsFiddle
Updated your jsFiddle http://jsfiddle.net/N7xgC/6/
$(document).ready(function()
{
$('.main > li > a').click(function(event)
{
$('.main > li > ul').hide();
$(this).next().show();
});
});
Like this?
http://jsfiddle.net/foxbunny/N7xgC/10/
EDIT: A bit of a cleanup, with single click handler:
http://jsfiddle.net/foxbunny/N7xgC/11/