We Keep Coding

drop-down menu not opening in single click?

pop-up menu not working in a single click can any one help me to this?
Here is the link
enter link description here
Here is the image
Please help me open it on single click and hide on anywhere click in the body.
Here is the Code
$(function () {
$('.ui-323 ul.ui-nav > li').tooltip();
});
$(document).ready(function () {
$(".ui-323 ul.ui-nav > li > a.ui-bar").click(function (e) {
/*e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}*/
});
$(".ui-323 ul.ui-nav > li > a.ui-user").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
$(".ui-323 ul.ui-nav > li > a.ui-doctor").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
$(".ui-323 ul.ui-nav > li > a.ui-patient").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
$(".ui-323 ul.ui-nav > li > a.ui-settings").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
$(".ui-323 ul.ui-nav > li > a.ui-import").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
});

There is lot of unnecessary code in your JS. Also the references to the external sources were not correctly put up. Here is the updated JS :
$(document).ready(function () {
$(".ui-323 ul.ui-nav > li > a").click(function (e) {
e.preventDefault();
if (!($(this).parents(".ui-323").hasClass("active"))) {
//$(this).parents(".ui-323").addClass("active"); //Add Class Active
}
else {
$(this).parents(".ui-323").removeClass("active"); //Remove Class Active
}
});
});
Also remove the class clearfix from your HTML like this:
<div class="ui-323 active" style="position: fixed; width: 100%; z-index: 100;">
<!-- Your code -->
</div>
UPDATE:
Add the following JS code for closing the menu items on mouseleave:
$(".ui-323 ul.ui-nav > li > a").mouseleave(function (e) {
e.preventDefault();
$(this).parents(".ui-323").addClass("active");
});
I have updated the JSFiddle. Now the menu items are opening up in a single click and closing on mouseleave.

You've got a lot of unnecessary duplicate code in there. I'd simplify all those click functions down to one, then add the class "menuItem" to each link. I edited your fiddle:
http://jsfiddle.net/mckinleymedia/4yd7panj/3/
It wasn't working also because jsfiddle wasn't able to pull those files. I added the regular jQuery and disabled your tooltips to show how the thing works.
Here's the code:
$(document).ready(function () {
$(".ui-323 ul.ui-nav > li > a.menuItem").click(function (e) {
e.preventDefault();
$(this).parents(".ui-323").toggleClass("active");
});
});
You could make this simpler by making it toggleClass... Actually, yeah, there's no reason not to. Edited the answer.

Removing class on one div when other is clicked

Following is my HTML,
<div class="container">
<ul class="navbar">
<li class="nb-link"><a>Home</a></li>
<li class="dropdown">
<a>CBSE</a>
<ul class="dropdown-menu">
<li>10th Standard</li>
<li>12th Standard</li>
</ul>
</li>
<li class="dropdown">
<a>Engineering</a>
<ul class="dropdown-menu">
<li>JEE - Main</li>
<li>JEE - Advanced</li>
</ul>
</li>
</ul>
I have 2 dropdowns . When I click one, it comes down. But when I click another, even that comes down without closing the previous one . This creates an overlap. The way I'm handling this using JS is as follows
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$('.navbar').$this.children('.dropdown-menu').removeClass('open');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').addClass('open');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});
How can I achieve a functionality using JS such that the previous dropdown closes when I click a new dropdown ? Also, the dropdowns should close when anywhere on the page is clicked ?

can try this
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$('.dropdown').not($this).removeClass('active')
$('.dropdown-menu').not($this.find('.dropdown-menu')).removeClass('open');
$this.toggleClass('active');
$this.find('.dropdown-menu').toggleClass('open');
});
});
Working Demo
this is a function you can use if selectors is not target
// function for if selectors not target
function actionwindowclick(e , selector , action){
if (!$(selector).is(e.target) // if the target of the click isn't the container...
&& $(selector).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
and you can use it in window click event like this
$(window).on('click', function(e){
actionwindowclick(e , ".dropdown , .dropdown-menu" , function(){
$('.dropdown').removeClass('active')
$('.dropdown-menu').removeClass('open');
});
});
Working Demo
Note: I think you may need to
event.stopPropagation()
while you trying to click on .dropdown-menu itself
$('.dropdown-menu').click(function(e) {
e.stopPropagation()
});

Try:
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$this.children('.dropdown-menu').toggleClass('open');
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});

toggleClass on hyperlink not working

I'm working with the following code:
http://jsfiddle.net/k5pnj4a4/8/ however my 'toggleClass' isn't working. Try the example in jsFiddle. Basically if I click the link, it goes red as expected but click again & it doesn't return to the original state :-(
Javascript:
$(document).ready(function(){
$('.filters a').on('click', function() {
var data_filter = $(this).closest("a").data('filter');
$(this).addClass('active');
if($(this).hasClass('active')) {
localStorage.setItem(data_filter,true);
} else {
localStorage.setItem(data_filter,false);
}
});
$('.filters a').each(function(){
var data_filter = $(this).closest("a").data('filter');
var checked = localStorage.getItem(data_filter);
if(checked){
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
HTML
<div class="filters">
<h3 data-target="#colours_filters">Colour</h3>
<ul id="colours_filters">
<li class="filter-option">Black</li>
<li class="filter-option">Blue</li>
</ul>
</div>
Can someone provide assistance with this?
Thank you

Try this:
$(document).ready(function(){
$('.filters a').on('click', function() {
if($(this).hasClass("active")) {
$(this).removeClass("active");
}
else {
$(this).addClass("active");
}
});
});

Get ID of Clicked list item returning undefined

I have a list
<ul class="submenu">
<li>Profile</li>
<li>Change Password</li>
<li>Payment Settings</li>
</ul>
And would like to get the id of the list item once clicked, how would i do this?
I have tried the below and get undefined?
$(document).ready(function () {
$(this).click(function () {
console.log(this);
});
});

click event should be bound to certain element(s), which could be selected using particular selector:
$('.submenu > li > a').click(function() {
console.log(this.id);
});

$("a").click(function () {
console.log(this.id);
});

Try this:-
$(document).ready(function () {
$(".submenu li a").click(function () {
console.log($(this).attr("id"));
});
});
Working fiddle

onclick outside menu hide submenu using jquery

Here is my code:
$("#menu li:not(:first-child)").click(function () {
$(this).siblings().removeClass('active');
$menu = $(this).find('ul');
$othermenu = $(this).siblings().find('ul');
if($othermenu.is(':visible') == true) {
$othermenu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});
}
if($menu.is(':visible') == false) {
$(this).addClass('active');
$menu.css({display:'block'}).animate({opacity:'1', easing:'easeOutQuad'}, 500);
} else {
$(this).removeClass('active');
$menu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});
}
});
using this code to show/hide sub menus on click of menu. I want to change as if i clicked outside menu that time also i want to hide sub menu.
My Html Code like this
<div id="menu" class="showmenubox submenucheck">
<ul> <li><a href="#" >Home</a> </li>
<li>About
<ul ><li>
<strong>aaaa</strong>
bbb
</li>
</ul></li>
<li>Contact
<ul><li>
<strong>aaaa</strong>bbb
</li>
</ul>
</li> </ul> </div>

You want to test whats been clicked when the document is clicked...
$(document).click(function (e) {
var $container = $("#menu");
if (!$container.is(e.target) // if the target of the click isn't the container...
&& $container.has(e.target).length === 0) // nor a descendant of the container
{
$container.find('.active ul').animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});
}
});
http://jsfiddle.net/kW2Nb/

Use the code below comments.
$("#menu li:not(:first-child)").click(function (e) {
$(this).siblings().removeClass('active');
$menu = $(this).find('ul');
$othermenu = $(this).siblings().find('ul');
if($othermenu.is(':visible') == true) {
$othermenu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});
}
if($menu.is(':visible') == false) {
$(this).addClass('active');
$menu.css({display:'block'}).animate({opacity:'1', easing:'easeOutQuad'}, 500);
} else {
$(this).removeClass('active');
$menu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});
}
/**
* Bind click event on document
* It will hide menu which is currently open and unbind click event on document
*
*/
var me = $(this);
$(document).click(function(e) {
$menu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});
$(document).unbind("click");
me.removeClass('active');
});
$menu.click(function(e) {
e.stopPropagation();
});
e.stopPropagation();
});