Develop Reference

How to Keep Sub Menu Open Without Clicking

I have an html navigation menu that opens sub menus on a click like so...
$("#nav_evnavmenu > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
$("#nav_evnavmenu .selected").removeClass("selected");
} else {
$("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
$("#nav_evnavmenu .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
I'd like to achieve the same thing on hover, but it doesn't work. It either doesn't leave the sub menu open or a variety of other things, this is one obvious this I've tried:
$("#nav_evnavmenu > li > a").hover(function () { // detect hover
if ($(this).parent().hasClass('selected')) {
$("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
$("#nav_evnavmenu .selected").removeClass("selected");
} else {
$("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
$("#nav_evnavmenu .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
I also tried:
$("#nav_evnavmenu > li > a").hover(function () { // detect hover
$(this).click();
});
Any help would be appreciated.
Edit: Here's some of the HTML:
<div class="menu_evnavmenu">
<span>
<ul id="nav_evnavmenu">
<li>Home</li>
<li>Menu 1
<div class="subs">
<div class="wrp2">
<ul>
<li><h3>1</h3>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
<p class="sep"></p>
<ul>
<li><h3>2</h3>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li><h3>3</h3>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>Menu 2
<div class="subs">
<div class="wrp2">
<ul>
<li><h3>1</h3>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
<p class="sep"></p>
<ul>
<li><h3>2</h3>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li><h3>3</h3>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
</div>
Here's how I closed the menu when the mouse left the menu:
$('.wrp2').on('mouseleave', function(e) { // close menu on mouseout
$("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
$("#nav_evnavmenu .selected").removeClass("selected");
});

Maybe try :
$('#nav_evnavmenu > li > a').on('mouseover click', function(e) {
e.stopPropagation();
// do your action on mouseover and click
});
You might also want to have a look at some of those jQuery selectors you're using in your snippet there - perhaps some classes on the elements if you're able to add them, rather than the nested selectors, and caching them in variables will be better for performance ,and re-use.

Try the below code:
$("#nav_evnavmenu > li > a").on('mouseenter', function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
$("#nav_evnavmenu .selected").removeClass("selected");
} else {
$("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
$("#nav_evnavmenu .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
You can write or customize the same when you want to hide or slideUp the submenus.
Hope this helps!

You can use multiple events with the on method in jquery:
$('#nav_evnavmenu > li > a').on({
'click mouseover': function(e) {
e.stopPropagation();
// do your action on mouseover and click
},
'mouseout': function(e) {
e.stopPropagation();
// do your action for when mouse leaves element
$("#nav_evnavmenu .selected div div").slideUp(100);
$("#nav_evnavmenu .selected").removeClass("selected");
}
});

How to hide a menu when an item is clicked or hide the menu when someone clicks away

So i want to hide my bootstrap menu on the event when an item is clicked. This is my menu code
<div class="container visible-xs" id="top">
<div class="header-bottom navbar-fixed-top">
<div class="top-nav">
<span class="menu"><img src="images/pic copy.png" alt="toggle"> BESSIT4REAL</span>
<ul id="ul">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Contact</li>
</ul>
</div>
<div class="social-icons">
<ul class="social">
<li><a href="#" ><i> </i> </a></li>
<li></i></li>
<li></i></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<br class="visible-xs">
</div>
and this is my javascript code
<script>
$("span.menu").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".ul").hide();
});
});
$('')
});
</script>
Basically i need to hide the entire "<ul>" element when the <li> item is clicked,
Currently when someone click on home or about, the menu stays on the screen and does not disappear.

Use the following Jquery Code:
<script>
$(".top-nav li").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$(this).hide();
});
});
</script>

you have an error.. your ul has an ID not a class, so you should us '#' in your jquery.
And to hide your ul you can use either hide() or fadeOut(0)..
$("#ul li a").click(function() {
$("#ul").fadeOut(0);
});
or
$("#ul li a").click(function() {
$(this).fadeOut(0);
});

$(".ul").hide();
references all elements with a class of "ul" You probably want (in your code example) the id referece
$("#ul").hide();
Or if you want all the <ul> elements then give them both the same class (like "hideableUL") then you could go like:
$(".hideableUL").hide();

I did this and it helped.
$("span.menu").click(function(){
$(".top-nav #ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".top-nav #ul").hide();
});
});
$('')
});

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

Issue targeting specific selector jquery in dropdwon menu

I have a drop down menu with jquery and I want to modify some text in different way depending on what is selected in the drop down menu.
The drop down menu works.
Html code:
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>
Javascript code:
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this) == '#op1'){
$('#text_to_change').text("text changed");
}
if ($(this) == '#op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
Why does ($(this) == '#op1') not work?

You are trying to compare a jquery object $(this) with a string #op1
To get the id of the element use:
$(this).attr('id');
It will give you the id of the element without the #
Also i think your second if needs to be an else if { ...
$(document).ready(function() {
$('.myMenu li ul li').click( function(event){
console.log($(this).attr('id'), $(this).prop('id'));
$(document).find('#text_to_change').css('visibility', 'visible');
$('.myMenu').hide();
if ($(this).attr('id') == 'op1'){
$('#text_to_change').text("text changed");
}
else if ($(this).attr('id') == 'op2'){
$('#text_to_change').text("text changed differently");
}
else{
$('#text_to_change').text("text changed differently again");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<ul class="myMenu">
<li>Choose your location
<ul>
<li id="op1">option1</li>
<li id="op2">option2</li>
<li id="op2">option3</li>
</ul>
</li>
</ul>
</div>
<div>
<h1 id="text_to_change">Welcome to blabla</h1>
</div>

This two item must not share the same id 'op2'
<li id="op2">option2</li>
<li id="op2">option3</li>

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.