How to Keep Sub Menu Open Without Clicking - javascript

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");
}
});

Related

Hide content on menu link secondary click

Here is some code and a question: how to enable toggle effect after clicking again on menu link button with saving existing functionality? So I need to hide content on second click (secondary click on link one hides content 1, etc.) All other staff is working perfect, but I have something broken in my jQuery. Also, maybe I have too many non-useful lines of code here. Please correct me if you can.
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
this.parent.siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
$(document).mouseup(function (e) {
// if the target of the click isn't the menu nor a decendant of the menu
if (!menu.is(e.target) && menu.has(e.target).length === 0) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});
// hide menu when clicking on links
$('.menu a').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
.is-hidden {
display: none;
}
.is-visible {
display: block;
}
.active {
background: green;
}
.main_nav {
padding: 0;
}
.main_nav li {
display: inline-block;
position: relative;
width: 180px;
background: grey;
text-align: center;
}
.main_nav li a {
display: block;
padding: 30px 0 1px;
cursor: pointer;
text-decoration: none;
}
.menu {
background: grey;
width: 1000px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu is-hidden" id="link_1">
Content 1
</div>
<div class="menu is-hidden" id="link_2">
Content 2
</div>
<div class="menu is-hidden" id="link_3">
Content 3
</div>
<div class="menu is-hidden" id="link_4">
Content 4
</div>
<div class="menu is-hidden" id="link_5">
Content 5
</div>
<div class="menu is-hidden" id="link_6">
Content 6
</div>
Here is a pen containing the code for this example.
What you really want is, just hide other divs except the selected one, when you click on the respective link and again hide it with second click.
Well It doesn't need that kind of messy javascript code
$(function(){
$('.clicker').click(function(e){
$('.menu').hide();
$('#link_'+$(this).attr('target')).toggle();
});
});
.menu{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu" id="link_1">
Content 1
</div>
<div class="menu" id="link_2">
Content 2
</div>
<div class="menu" id="link_3">
Content 3
</div>
<div class="menu" id="link_4">
Content 4
</div>
<div class="menu" id="link_5">
Content 5
</div>
<div class="menu" id="link_6">
Content 6
</div>
.
I think this must be a complete solution for your problem.
It seems that your onClick function on anchors are not working exactly as you had in mind. Here's what I'm going to do:
First, let's get rid of other functions, mouseup and menu click. You can elaborate on those matters later.
For the problem at hand, your anchor click function, just toggle the divs. You can select which div to show/hide by using the hrefs.
Just remove the dash from the href and sent it to jQuery selector. Then you can toggle it. I seperated the code into multiple lines for the sake of understanding.
Hope this helps.
anchor.click(function() {
var href = $(this).attr("href").replace('#', '');
var div = $('#' + href);
$('div.menu').not(div).hide();
$(div).toggle();
});
Here's a pen
The solution finds me. Only JS below:
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
$(this).parent().siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
// close menu when clicking on links or button inside of it
$('.menu a, .menu button').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
// close menu when clicking inside of it
$('body').click(function(e) {
var el = e.target || e.srcElement;
// if the target of the click isn't the other menu nor navigation link
if (!$(el).closest('.menu').length && !$(el).closest('.main_nav li a').length) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});

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

slideToggle remove other active classes

I have a simple menu/accordion slider. I want to add the class="active" to the clicked link and slide down to show the UL. When another separate menu item is clicked then the active class should be removed from the previous element and added to the one just clicked. Also if the same is clicked when in active mode then the slider should slide up and remove the active class.
I've tried various configurations of the below but each time have problems getting the active class to be removed if the same is clicked to slide up. Any help is appreciated.
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
});
Update - have created a quick JSFiddle that demonstrates the problem, apologies for not doing on opening question. You can see that if same item is clicked to toggle the state remains active.
Since you want to support toggling, you should not remove active class from current element so
$(document).ready(function(menuSlide) {
var $as = $('li.menu-item-has-children a').click(function() {
$(this).toggleClass('active').next('ul').slideToggle();
$(this).parent().siblings().children('ul').slideUp();
$(this).parent().siblings().children('.active').removeClass('active');
return false;
});
});
.menu-item-has-children ul {
display: none;
}
a.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li class="menu-item-has-children">
<a>1</a>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
</ul>
We simply store the previous click div in a variable and then slide up that div on click :
var previousElement = 0;
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
previousElement = 0;
}else {
$(this).addClass('active');
if(previousElement != 0) {
$(previousElement).removeClass('active');
$(previousElement).slideUp();
}
previousElement = this;
}
});
Easiest way is,
$(document).ready(function(){
$('li.menu-item-has-children .content').slideUp();
$(document).on('click','li.menu-item-has-children a',function(e){
e.preventDefault();
$this = $(this);
$('li.menu-item-has-children a').removeClass('active');
$this.addClass('active');
$('li.menu-item-has-children a').parent().find('.content').slideUp();
$this.parent().find('.content').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<ul>
<li class="menu-item-has-children">
A
<div class="content">
AAAA AAAA AAAA
</div>
</li>
<li class="menu-item-has-children">
B
<div class="content">
BBBB BBBB BBBB
</div>
</li>
<li class="menu-item-has-children">
C
<div class="content">
CCCC CCCC CCCC
</div>
</li>
</ul>
</html>
In below example, i've worked same link click twice, please let me know if you are requesting this thing or not,
$(document).ready(function(menuSlide) {
$('li.menu-item-has-children a').click(function () {
console.log($(this).hasClass('active'));
if($(this).hasClass('active') == false)
{
if ($('li.menu-item-has-children a').hasClass('active')) {
$('li.menu-item-has-children a').removeClass('active');
}
else {
$(this).addClass('active');
}
$(this).next('ul').slideDown();
$(this).parent().siblings().children().next().slideUp();
}
return false;
});
});

Dropdown Menu closed when we click all place

I have the following scripts in my dropdown menu:
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
HTML
<div class="menu">
<span>
<ul id="nav">
<li>Produk Teknik <i class='icons icon-right-dir'></i>
<div class="subs">
<div class="wrp3">
<ul>
<li><h3>Manometer</h3>
<ul>
<li><a href='#'>tes</a>
<ul>
<li><a href='#' class='anak'>tes-1</a></li>
</ul>
</li>
<li><br /></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
I need to change that script so that when we click all place, the dropdown menu will automatically be closed. Thank you
You can see my project example http://www.tokobesi.co.id/beta/
I think this is what you meant mate..Try this.. :)
$(document).click(function(e){
if( $(e.target).closest(".menu").length > 0 ) {
return false;
}else{
$("#nav .selected").removeClass("selected");
}
});

jquery - when toggle children do not toggle parent

I want to create a java-script-Drop-Down-Menu for a mobile site.
The problem is, that when I click on a list-item in level2, by the toggle of level1 the list-item of level2 (and level3) gets closed, so I have to click at the list-item of level1 again to see level2 and level3. How can I deactivate the toggle of level1 if I click on a list-item of level2?
Please point me to the right direction. Thank you!
Here's my html:
<div id="menu">
<ul>
<li class="level1"><a href="/xyz.html">
<li class="level1"><a href="/xyz.html">
<ul>
<li class="level2"><a href="/xyz.html">
<li class="level2"><a href="/xyz.html">
<ul>
<li class="level3"><a href="/xyz.html">
<li class="level3"><a href="/xyz.html">
</ul>
<li class="level2"><a href="/xyz.html">
</ul>
<li class="level1">
<li class="level1">
</ul>
</div>
Here's my jquery:
$(document).on('pageinit',function(e,data){
// close menu if you go to another page
$('#menu').hide();
$('.level2').hide();
$('.level3').hide();
// Do not link if a sub-menu is present
$('li:has(ul) > a').replaceWith(function() {
return $(this).text();
});
// at click on menu-button scroll to top and open menu
$(document).off('click', '#menuicon').on('click', '#menuicon',function(e) {
$('html, body').stop().animate({ scrollTop : 0 }, 0);
$('#menu').slideToggle(400);
});
// elements of the menu, different sub-menus width different classes
$('#menu').on('click','.level1',function(e) {
$(this).find('.level2').slideToggle();
});
$('#menu').on('click','.level2',function(e) {
$(this).find('.level3').slideToggle();
});
$('#menu').on('click','.level3',function(e) {
$('.level3').hide();
$('.level2').hide();
$('.level1').hide();
$('#menu').hide();
});
});
use e.stopPropagation();
$('#menu').on('click','.level1',function(e) {
e.stopPropagation();
$(this).find('.level2').slideToggle();
});
$('#menu').on('click','.level2',function(e) {
e.stopPropagation();
$(this).find('.level3').slideToggle();
});
$('#menu').on('click','.level3',function(e) {
e.stopPropagation();
$('.level3').hide();
$('.level2').hide();
$('.level1').hide();
$('#menu').hide();
});

Categories

Resources