I want to close my Javascript menu by clicking outside of the menu. I am using this menu. I'm not professional, please tell me how to change my code to do that:
$("#theme_select").click( function () {
if (theme_list_open == true) {
$(".center ul li ul").fadeOut();
theme_list_open = false;
} else {
$(".center ul li ul").show();
theme_list_open = true;
}
return false;
});
$("#theme_list ul li a").click(function () {
var theme_data = $(this).attr("rel").split(",");
$("li.purchase a").attr("href", theme_data[1]);
$("li.remove_frame a").attr("href", theme_data[0]);
$("#iframe").attr("src", theme_data[0]);
$("#theme_list a#theme_select").text($(this).text());
$(".center ul li ul").hide();
theme_list_open = false;
return false;
});
If you want to close that menu when the iframe area is clicked, you have to do that in the iframe. Try putting this in your iframe's document ready function:
$("html").click( function () {
$(".center ul li ul", window.parent.document).fadeOut();
window.parent.theme_list_open = false;
});
Seems you use $("#theme_select").click( function () { for both open and close the menu. and use $("#theme_list ul li a").click(function () { to handle click on menuitem, which will close the menu after.
In fact there is simple solution to your problem. Use $("#theme_select").click for only open the menu, and $("#theme_list ul li a") for handle the link, and introduce $(window).click to close the menu.
function checkAndCloseMenu(evt) {
var dropmaker = $('#theme_select')[0];
for (var node = evt.target; node != document.body; node = node.parentNode)
if (node == dropmaker) return false; // check if click in the dropmaker
$('.center ul li ul').fadeOut();
$(window).unbind('click', checkAndCloseMenu);
}
$("#theme_select").click(function() {
$(".center ul li ul").show();
$(window).click(checkAndCloseMenu);
});
$("#theme_list ul li a").click(function() {
var theme_data = $(this).attr("rel").split(",");
$("li.purchase a").attr("href", theme_data[1]);
$("li.remove_frame a").attr("href", theme_data[0]);
$("#iframe").attr("src", theme_data[0]);
$("#theme_list a#theme_select").text($(this).text());
return false;
});
PS: may be you should give the menu and menuitems some class names, your selector is painful to read.
Related
I would like to hide the submenus and show them after their parents get clicked. At the moment I'm using a snippet I found on here, which unfortunately doesn't hide the submenu when loading. So I'm basically looking for an inverted solution of this or something completely else :)
The site: https://webnew.dpg-gruppe.eu
The snippet:
$(document).ready(function () {
$('#navmenu > ul > li:has(ul)').addClass("has-sub");
$('#navmenu > ul > li > a').click(function () {
var checkElement = $(this).next();
$('#navmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#navmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can try to add this line
$('#navmenu ul.sub-menu').hide();
after $(document).ready(function () {
I have written a JavaScript to show a tick mark just to the right side of the selected drop-down item (CSS class name active):
$(document).ready(function () {
$('.select-country ul li a').click(function () {
$('.select-country ul li a').removeClass("active");
$(this).addClass("active");
return false;
});
});
Its works well, but I have a problem here.
Problem:
When I refresh the page the drop-down will default to a default selected item. But that selected item is not showing the tick mark.
How do I rewrite the query to show the tick mark for the default selected item in drop-down?
You need to loop over the li so that respective links are responsible for there own events,
$(document).ready(function () {
$('.select-country ul li a.default').addClass("active");
//loop over all li
$('.select-country ul li a').each(function () {
//remove first from any active link
$(this).click(function(){
$('.select-country ul li a').removeClass("active");
//find and add active on "this" link
$(this).addClass("active");
return false;
});
});
});
Having a few issues with this badboy:
Basically need it so that when one of the hidden lists collapses the markup is checked to see if there are any other 'active' lists already open, and to close those before a new one is opened. It looks messy if more than one is open at the same time.
Link:
http://www.matchboxlondon.com/ten/menu3/index.html
Try:
1. Click Menu
2. Click Services
3. Click Pilates to expand
4. Click Fitness to expand
Problem: Heading is also removed when .slideup() is used.
What my code is doing at the moment is checking to see if anything is opened with a globally defined variable called 'somethingOpen' - this is set to null on page load. This is all well and good BUT I feel it may have something to do with the complete display:none of the collapsable lists:
Because it's listy and nesty, I'll only include the js in here and not the markup:
somethingOpen = null; // to set after close and open
$('#cssmenu > ul > li > a').click(function () {
if (somethingOpen === true) { // first check
$("#cssmenu > ul > li").each(function () {
$("#cssmenu > ul > li.active").removeClass('active').slideUp(); // <-- problem here
somethingOpen = false; // closing so set to false
return false; // exit function
});
} // End somethingOpen if
// Open
var checkElement = $(this).next(); // more checks
$(this).closest('li').addClass('active'); // add active class
somethingOpen = true; // redefine if anything is open
// Close
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
somethingOpen = false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
// Returns
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
}); // End click
Try This:
//$("#cssmenu > ul > li.active").removeClass('active').slideUp(); // -- problem here
$("#cssmenu > ul > li.active").animate({height: "toggle", opacity: "toggle"}, 'fast');
For anyone that was interested, it needed a little tweaking, using children() and an after (>) to properly select the right element.
somethingOpen = null; // to set after close and open
$('#cssmenu > ul > li > a').click(function () {
if (somethingOpen === true) { // first check
$("#cssmenu > ul > li").each(function () {
$("#cssmenu").children('.active').removeClass('active');
$("#cssmenu > ul > li > ul").slideUp('normal');
somethingOpen = false; // closing so set to false
return false; // exit function
}); // end each
}
}); // End somethingOpen if
Hello i have created a multi level navigation in magento. Now i have a problem with the opening and closing of my menu. I want my menu to close the "active" Top Menu when the other Top Menu is clicked.
I cant seem to get this part correct.
Javascript:
jQuery(document).ready(function(jQuery) {
jQuery(".sub_category").hide();
jQuery(".sub_sub_category").hide();
jQuery('#product-nav li a').click(function () {
jQuery('#product-nav li a').removeClass('active');
jQuery(this).addClass('active');
});
jQuery('ul li.expanded a').each(function(i){
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
jQuery(this).bind('click',function(e){
// Prevent the default action of the link
subUl.toggle();
}) ;
});
jQuery(".head_child").click(function(e) {
e.preventDefault();
});
jQuery('li:has(ul) > a').click(function(e) {
e.preventDefault();
});
var url = window.location.toString();
jQuery('ul li.expanded a').each(function(){
var myHref= jQuery(this).attr('href');
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
if( url.match(myHref)) {
jQuery(this).addClass('activeElement')
subUl.toggle();
}
});
});
Please see my jsfiddle for the example of my code.
http://jsfiddle.net/wvEcF/1/
At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});
On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}