Develop Reference

Not able to click on Dropdown Submenu Link

I have following code and when I hover on Menu it has some dropdown submenus and I am not able to click on any of my submenu links:
HTML:
<li class="onesource-user">
<%=expert.firstname %> <%=expert.lastname %>(<%= expert.login %><%=session.getAttribute("multi_lobs")==null?"":" - "+view_name %>)
<ul>
<li>Profile</li>
<li>Favorites</li>
<li class="log-out">Log out</li>
</ul>
JS:
$('.onesource-user').on('click', function(e){
e.preventDefault();
$(this).toggleClass('open');
return false;
})
Screenshot:
screenshot

Because of you're using event on .onesource-user so it'll aply on all it children so ( e.preventDefault + return false ) .
this would help .
$('.onesource-user > a').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('open');
return false;
})
see the above snippet :
$('.onesource-user > a').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('open');
return false;
})
.onesource-user ul{
display:none;
}
.onesource-user.open ul{
display:block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li class="onesource-user">
Sample UserName
<ul>
<li>Profile</li>
<li>Favorites</li>
<li class="log-out">Log out</li>
</ul>
</li>

HTML JS - sub menu is not working?

I'm trying to achieve this. But I could not succeed so far. My code is given below. What is wrong with it?
html:
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger" id="bt-icon icon-gplus" ><br><span>Menu
<ul >
<li style="text-align:center;"><span>DashBoard</span></li>
<li style="text-align:center;"><span>User </span></li>
<li style="text-align:center;"><span>Candidates</span></li>
<li style="text-align:center;"><span>Partylist</span></li>
<li style="text-align:center;"><span>Position</span></li>
<li style="text-align:center;"><span>Program</span></li>
<li style="text-align:center;"><span>Department</span></li>
<li style="text-align:center;"class="active"><span>School-Year</span></li>
<li style="text-align:center;"><span>Reports</span></li>
<li style="text-align:center;"><span>Logs</span>
<ul class="sub-menu" style="text-align:right">
<li>Submenu</li>
</ul></li>
</ul>
</nav>
Javascript:
<script type="text/javascript">
$('li a').click(
function() {
$(this).next().slideToggle();
})
</script>

Firstly correct your markup ,some tags are not properly closed.
Second, you need to use preventDefault() to disable the default action of the a tag.
Third,
$('li a').click(
function() {
$(this).next().slideToggle();
})
this code will toggle you menu only if next element is the menu itself.
so use this
$('li a').click(function(e) {
e.preventDefault();
$('a:contains(Submenu)').slideToggle();
});
https://jsfiddle.net/uc3hp4o5/

How to toggle using JQuery

I have an accordion, and I'm able able to open on each click, but how can I close it back again?
HTML:
<ul class="accordion">
<li id="one" class="files">
Calendar 1<span>10</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>1</span></li>
</ul>
</li>
<li id="two" class="mail">
Calendar 2<span>20</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>2</span></li>
</ul>
</li>
<li id="three" class="cloud">
Calendar 3<span>30</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>3</span></li>
</ul>
</li>
<li id="four" class="sign">
Calendar 4
<ul class="sub-menu">
<li><em>01</em>Sub Menu</li>
</ul>
</li>
</ul>
Javascript:
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Open the first tab on load
accordion_head.first().addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active') {
$(this).next().stop(true,true).slideToggle('normal');
$(this).addClass('active');
}
});
});
Fiddle: http://jsfiddle.net/fuuLh494/

You dont need to explicitly check for active class occurence and then do add/remove decision of class. You can achieve this with toggleClass:
accordion_head.on('click', function(event) {
event.preventDefault();
$('.sub-menu').not($(this).next()).slideUp('normal').prev().removeClass('active');
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
});
Working Demo

You can remove the if completely, and use both slideToggle and toggleClass:
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
Updated Fiddle

if ($(this).attr('class') != 'active'){
//accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
//accordion_head.removeClass('active');
$(this).addClass('active');
} else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}
See the updated fiddle here: http://jsfiddle.net/9ev31v6w/

The best you can do with a tutorial is learn, and not copy&paste without read the code. It's as simple as this:
http://jsfiddle.net/fuuLh494/1/
I add else statement at the end of the script:
else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}

Replace all instances of addClass with toggleClass and remove the condition of if class is active.
We are trying to remove the class when the class is already added using toggleClass() and don't need any if condition block.
accordion_head.first().toggleClass('active').next().slideDown('normal'); // Changed
if ($(this).attr('class') != 'active') { } // Removed
$(this).toggleClass('active'); // Changed
Working JSfiddle

When i click on main menu the sub menu should highlight in php

From many days am trying this but there is no result please help me when i click on main menu sub menu should highlight in php.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#cssmenu a').each(function (index) {
console.log(this.href);
if (this.href.trim() == window.location) {
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active {
background: #4FA9E4;
color: #FFF;
display: block;
}
</style>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul>
<li class="has-parent">a
</li>
<li>b
</li>
</ul>
</li>
<li class="has-sub">Patners
<ul>
<li>c
</li>
<li>d
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>

You should handle the click event or other events you are interested, and toggle class in the event handler.
$(document).ready(function () {
$('#cssmenu ul ul a').click(function (e) {
//e.preventDefault();
$(this).parents('li.has-sub').find('>a').toggleClass('active');
});
});
Check the jsFiddle example.

On-click drop-down nav menu

I am making a column list with some drop-down menus and I needed the Jquery for the drop-down to make it work.
I have found some Jquery for this but the problem is when you have two menus with ul and li, like this.
HTML:
<ul class="list-menu">
<li class="sort-menu">4</li>
<div class="sort-list-dropdown">
<ul class="sort-list">
<li>4</li>
</ul>
</div>
</ul>
When you duplicate this two times and then when you click the 4 on the class that says sort-menu, it will put up two menus containers and that class is sort-list-dropdown I have been playing with JS I got from somewhere and I'm getting confused about this issue.
JavaScript:
$("ul.list-menu > li").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("ul.sort-list > li").hide();
$(this).attr('id', '0');
} else {
$("ul.sort-list > li").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$("ul.sort-list > li").mouseup(function () {
return false;
});
//Mouse click on my account link
$("ul.list-menu > li").mouseup(function () {
return false;
});
//Document Click
$(document).mouseup(function () {
$("ul.sort-list > li").hide();
$("ul.list-menu > li").attr('id', '');
});
I get some of the variables but I do not think it's the code. I think I need to input a new variable but I do not know what does it need for it.
If anybody knows how to accomplish this, then please reply back to me.

I have one answer for this problem. Please try this code below:
$(document).ready(function() {
$('.sort-list-dropdown').hide();
$('ul.list-menu li').click(function() {
$(this).next('.sort-list-dropdown').toggle();
});
});
In code 'click', you can change it to 'hover'.

Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/
HTML:
<ul>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li class="sec">Heading Two</li>
<li><ul>
<li>Third</li>
<li>Third</li>
<li>Third</li>
</ul></li>
</ul></li>
<li class="sec">Heading One</li>
<li><ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul></li>
</ul>
JS:
$(function(){
$('li.sec').on('click', function() {
$(this).next('li').slideToggle();
});
});
CSS:
ul li {
list-style:none;
}
.sec {
background:#efefef;
padding:25px;
font-size:24px;
}
Try something like this:
http://jsfiddle.net/SinisterSystems/bmwBr/5/