We Keep Coding

How to make dropdown menu close when opening another one

Hy!Im a iniciant in javascript.
I'm having trouble closing the dropdown when clicking on another open one.
I try this:
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
} else {
this.previousElementSibling.classList.remove('dropdown-active');
}
}, true)
dropdown image opened items
Codepen code
Thank you for any help!

a few days later.
this is my solution:
Use querySelectorAll + forEach in .dropdown-active and then remove the class
on('click', '.navbar .dropdown > a', function (e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
document.querySelectorAll(".dropdown-active").forEach(function (element) {
element.classList.remove("dropdown-active");
});
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)

Remember and show previously active nav-tab after hover mouseout?

I have few sub-tabs(nav-pills) under every main tab(nav-tabs). And i want to show them on hover over main tab while going back to the active main-tab after hover.
I have written jquery for hover but not sure how to go back to the previous active tab.Problem is that on mouse hover , the last hovered tab stays active.
My code is given below where
$('.nav-tabs > li > a').hover(function () {
//$($(this).attr('href')).show();
$(this).tab('show');
}, function () {
// debugger;
//if ($(this).hasClass('active')) { //if ($(this).parent('li').hasClass('active')) {
// $($(this).attr('href')).show();
//}
//else {
// $($(this).attr('href')).hide();
//}
});

You will need to use a class to recall your previous state when you are done hovering.
$('.nav-tabs > li > a').hover(function () {
$('.nav-tabs > li.active').addClass('lastActive');
$(this).tab('show');
}, function () {
$('.nav-tabs > li.lastActive').removeClass('lastActive').children('a').tab('show');
});
Also you will need to add a click event that removes your lastActive class.
$('.nav-tabs > li > a').click(function () {
$('.nav-tabs > li.lastActive').removeClass('lastActive');
$(this).tab('show');
});
Something like this :)

Navigation link does not highlighting the current menu, when submenu is clicked

I have written jquery code for highlighting menu onclick of each respective submenu. Now here what happening is
I have one same link in three of the sub-menu's, so when I click one of them, it is highlighting the last menu.
Here is my code:-
var str = location.href.toLowerCase();
$("#menu li a").each(function () {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.activelink").removeClass("activelink");
$(this).parent().addClass("activelink");
$(this).parents("#menu ul").parent().addClass("activelink");
}
});
$("li.activelink").parents().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
$("li.activelink").parents("#menu ul").parent().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
$("#menu li .para1 a").each(function () {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.activelink").removeClass("activelink");
$(this).parent().addClass("activelink");
$(this).parents().parent().addClass("activelink");
}
});
$("li.activelink").parents().each(function () {
if ($(this).is("li")) {
$(this).addClass("activelink");
}
});
Have a look here
Also see the HTML of the same in the Js fiddle
Please suggest something for the same

UPDATE: This was not the OP intended question. The code below will not solve the problem.
I had this problem numerous times. Try this CSS code:
#menu > li:hover { background-color: red; }
Replace the background color declaration with your own highlight.

Change a icon, not all

I managed to do everything right, open each element. As you can see in the example below all the icons change together, but as it does to replace only what was clicked?
$('.list-prod > li > span').on('click', function() {
$(this).next().slideToggle('slow', function() {
if($(this).is(':visible')) {
$('.list-prod > li > span').addClass('collapse');
} else {
$('.list-prod > li > span').removeClass('collapse');
}
});
});
External link demo

JSFIDDLE DEMO
$('.list-prod > li > span').on('click', function () {
$(this).toggleClass('expand collapse');
$(this).next().slideToggle('slow');
});

Here what you should write
$('.list-prod > li > span').on('click', function () {
$(this).next().slideToggle('slow', function () {
$(this).prev().toggleClass('collapse');
});
});
since this within the callback function refer to the collapsed / visible div

jQuery menu with click to show and hide on mouseleave

At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});

On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});​
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}