Close other menus on page before new one opens - javascript

$(function () {
var pull_1 = $('#pull-main-menu');
var menu_1 = $('#mobile-menu');
pull_1.on('click', function (e) {
e.preventDeenter code herefault()
`enter code here`;
menu_1.slideToggle();
});
});
$(function () {
var pull_2 = $('#pull-first-menu');
var menu_2 = $('#first-menu-top-left');
pull_2.on('click', function (e) {
e.preventDefault();
menu_2.slideToggle();
});
});
$(function () {
var pull_3 = $('#pull-second-menu');
var menu_3 = $('#welcome');
pull_3.on('click', function (e) {
e.preventDefault();
menu_3.slideToggle();
});
});
HTML:
<div id="mobile-menu">
<ul>
<li></li>
<li></li>
</ul>
</div>
<ul id="first-menu-top-left">
<li></li>
<li></li>
<ul>
I have 3 functions which open 3 different menus on a page. I just can't figure out how to write conditions for these functions that will close the opened menu before new one gets opened.

You can alter your html a little to use classes, and combine all those functions into one. Run the snippet below to see it work.
$(document).ready(function(){
$('.ddtoggle').click(function(e){
$(this).next('.ddmenu').slideToggle();
$('.ddmenu').not($(this).next('.ddmenu')).hide()
}).next('.ddmenu').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
menu 1
<div id="mobile-menu" class="ddmenu">
<ul>
<li>menu item 1
</li>
<li>menu item 1
</li>
</ul>
</div>
menu 2
<ul id="first-menu-top-left" class="ddmenu">
<li>menu item 2
</li>
<li>menu item 2
</li>
<ul>

You can use a common class for your a elements (e.g pull-menu). In such a case you can have one function instead of 3:
$(function () {
$(".pull-menu").bind("click", function(evt){
$(".pull-menu").not($(this)).next("ul").hide();
$(this).next("ul").slideToggle();//Or slideDown()
evt.preventDefault();
})
});

Related

How to make dropdown menu with 3 levels?

I have a simple menu, and I want to do that when you click on the menu items to open a nested list. If you double-click then it must be opened and closed.
Html:
<ul class="menu">
<li class="has-child">Click here
<ul>
<li class="has-child">Click here
<ul>
<li>Level 3</li>
</ul>
</li>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
jQuery:
$('li.has-child').on('click', function () {
var elem = $(this).children('ul');
if (elem.is(':hidden')) {
elem.slideDown(500);
} else {
elem.slideUp(500);
}
});
But when I click on a menu item in the second level, then the first is closed. Why is this happening and how to fix it?
[JSFiddle]
You need to stop the event from propagating from the parent to the child or vice-versa. You can use event.stopPropagation():
$('li.has-child').on('click', function (event) {
event.stopPropagation()
var elem = $(this).children('ul');
if (elem.is(':hidden')) {
elem.slideDown(500);
} else {
elem.slideUp(500);
}
});
you need to use stopPropagation
$(document).ready(function () {
$('li.has-child').on('click', function (event) {
event.stopPropagation();
var elem = $(this).children('ul');
if (elem.is(':hidden')) {
elem.slideDown(500);
} else {
elem.slideUp(500);
}
});
});
This then stops the click bubbling up to the parent li
Fiddle

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/

when second parent menu is clicked show its submenu and hide the submenu of previously clicked parent menu

I have a vertical menu with submenus and I want to show the submenu only if the parent was clicked ,showing only one submenu at a time. But the thing is when other parent menu is clicked its submenu is shown BUT the previous submenu also is seen. How do i hide the previous submenu?? please help . I am new to javascript.
Here is my html-css-javascript code.
<div class="menu">
<ul >
<li>Contacts
<div style="display: none;" id="cert">
<ul >
<li >Submenu 1</li>
<li>submenu 2</li>
</ul>
</div>
</li>
<li>About
<div style="display: none;" id="defect">
<ul >
<li>menu 1</li>
<li>menu 2</li>
</ul>
</div>
</li>
</ul>
script
function Myfunction(obj) {
var ele=document.getElementById(obj).style;
if(ele.display=="none") {
ele.display="block";
} else { ele.display="none"; }
}
The easiest way will be using a global JavaScript variable, although it's not very elegant. Since you're not using any JavaScript libraries like e.g. jQuery everything else will turn into a pile of DOM-traversing spaghetti code.
var openEle = null;
function Myfunction(obj) {
var ele = document.getElementById(obj);
if (openEle != null) {
openEle.style.display = "none");
}
if (ele.style.display == "none") {
openEle = ele;
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
<a class="Label">Contacts</a>
<div>
<ul class="Submenu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<a class="Label">About</a>
<div>
<ul class="Submenu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
And :
(function($) {
$(function() {
$('.Label').on('click', function() {
$('.Submenu').hide();
$(this).next().find('.Submenu').show();
});
});
})(jQuery);
That's the jQuery approach. I'll let another couragous guy do it with native js :D
You can use this:
Demo here
var lastid;
function Myfunction(obj) {
var ele = document.getElementById(obj).style;
var elemLastId = document.getElementById(lastid);
if (elemLastId != null) {
elemLastId.style.display = "none";
}
lastid = obj;
if (ele.display == "none") {
ele.display = "block";
} else {
ele.display = "none";
}
}
I made a new variable to remember the last ID. So you can call it and apply display:none to it.

jquery toggle close other opened divs

I have an issue with using toggle where i need to close other divs that are already opened, so only the div you click on is open at one time, but still toggles.
<script type="text/javascript">
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$(this).siblings(".flyout").toggle(500);
});
});
</script>
<ul>
<li ><span id="europe"></span>Europe
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
<li ><span id="europe"></span>Asia
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>
Any ideas on what I can add in to get the click function to close every other div class="flyout" except the one its on?
have a look at http://www.footballadvisor.net/map/ to see the issue
thanks
Check this, please:
http://jsfiddle.net/MbTRD/1/
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$(this).siblings(".flyout").toggle(500);
});
});
​
The name of the country should be inside the span if you want to catch the click event.
The following close everything except the element you clicked :
<script type="text/javascript">
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$(".flyout").hide();
$(this).siblings(".flyout").toggle(500);
});
});
</script>
<ul>
<li ><span id="europe">Europe</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
<li ><span id="europe">Asia</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>
check this http://jsfiddle.net/MbTRD/5/ i hope this will helpful for you
Here an improvement to your jQuery: Fiddle
$(function () {
$(".flyout").siblings("span").click(function () {
$(".flyout").slideUp(200, function() {
$(this).siblings(".flyout").toggle(500);
});
$(this).siblings(".flyout").toggle(500);
});
});

High-light menu item

I have a one-page website with a menu like this:
<ul id="menu-menu" class="nav">
<li id="1">Item 1</li>
<li>Item 2
<ul>
<li id="1" class="sub">Item 2-1</li>
<li id="1" class="sub">Item 2-2</li>
<li id="1" class="sub">Item 2-3</li>
</ul>
</li>
<li id="1">Item 3</li>
<li id="1">Item 4</li>
</ul>
The menu is high-lighted by JavaScript:
<script type="text/javascript">
/* <![CDATA[ */
var J = jQuery.noConflict();
J(document).ready(function(){
J('.nav li:first').addClass('current');
J('ul.nav').each(function() {
J(this).find('li#1').each(function(i) {
J(this).click(function(){
J(this).addClass('current');
J(this).siblings().removeClass('current');
});
});
});
});
/* ]]> */
</script>
The problem is that when I click on Item 3 and than on Item 2-2, Item 3 stays high-lighted., and when I than click on Item 1, Item 2-2 stays high-lighted.
Any ideas how to fix this?
var J = jQuery.noConflict();
J(function(){
J('ul.nav li:first').addClass('current');
J('ul.nav li').click(function (e) {
J('ul.nav li.current').removeClass('current');
J(this).addClass('current');
e.stopPropagation(); // prevent the event click from bubbling up
});
});
Untested, but try to replace
J(this).addClass('current');
J(this).siblings().removeClass('current');
with
J('ul.nav .current').removeClass('current');
J(this).addClass('current');
.
The problem is that the sibling selector only finds just that, the siblings, and not the other elements.

Categories

Resources