My CMS generates menus as lists without any id's and classes. For submenus, there are nested lists.
I made jquery script for expanding submenus:
$(function () {
$(".wrapper ul li").click(function () {
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
});
});
My problem is that this script reacts to clicking whole li area and I want it to react to clicking link inside li. Of course I just have to add "a" to selector making it ".wrapper ul li a" but what about condition checking if there is ul nested inside li? And slidetoggle selector. How should I change these?
This might work with minimal modification to your original code.
$(function () {
$(".wrapper ul li a").click(function ()
{
this = $(this).parent();
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
}
);
});
Test and see if it works. I have not tested it. Cheers
Related
I want the current content to slideUp and then slideDown the clicked content and I am stumped on why the code I have won't work. It just slides down the text . content. Any help much appreciated!
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
$(".contentContainer").html('.content');
}).slideDown(1500);
});
});
});
When you do .html('.content'), you're telling jQuery to literally make ".content" the innerHTML of the container (ex.: div or span with class .contentContainer).
It's a little unclear what content you are trying to place in .contentContainer, but assuming it is the html of the first tag with the class ".content", you could use this:
$(document).ready(function() {
$('nav ul a').click(function(){
var newTopicText = $(this).html();
$('#topic').fadeOut(function () {
$('#topic').text(newTopicText).fadeIn();
$(".contentContainer").slideUp(1500, function() {
// Change this line...
$(".contentContainer").html($('.content').html());
}).slideDown(1500);
});
});
});
Edit: Updated to make it take the content of the first tag with the class ".content".
http://jsfiddle.net/nn0x6da8/2/
I'm having a bit of trouble with a dropdown menu that triggers fadeOut as soon as the mouse leaves the grandparent div, I've searched this problem to death and have yet to find an elegant solution. Here is my code : link
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function(){
$('ul li ul').fadeOut('400');
});
}
$(document).ready(main);
DEMO: MY FIDDLE
You need to specify what element(s) you are trying to attach the event to. By adding '>' youre forcing to only attach the event to that element's children. Try this:
var main = function() {
$('nav').mouseenter(function() {
$(this).find('ul').fadeIn('400');
});
$('nav>ul>li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
FIDDLE
$(this).find('ul').fadeOut('400');
is correct as $('ul>li>ul').fadeOut('400'); Could not target specific (current) li.
Use following hierarchical flow of TAGS
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
I have a simple jquery menu and I am trying to keep the submenu visible if a user hover overs it. so that I can select it if needed. However, when I get off the hover element the submenu will hide. Obviously, that's what I want as long as it's not also hovering over the submenu.
$(document).ready(function () {
$('.mainBar li a').hover(function(){
$(this).next().show() }, function () {
$(this).next().stop().hide()
});
});
http://jsfiddle.net/azxRX/1/
My opinion is to create this menus with css. Anyway i change a bit to this:
$('.sideBar > ul > li').bind('mouseover', openSubMenu);//This line sets it up so that when the mouse is moved over a li in myMenu, the function openSubMenu is called
$('.sideBar > ul > li').bind('mouseout', closeSubMenu);//This do exacly the same with the above but binds on mouseout instead.
function openSubMenu() {
///when the mouse rolls over the list item,
///the function looks for an unordered list within it.
///If one is found, it sets the style property display to block
$(this).find('ul').css('display', 'block');
};
function closeSubMenu() {
///This one does the oposite of openSubMenu function
$(this).find('ul').css('display', 'none');
};
fiddle
You can do this instead:
$(document).ready(function () {
$('.mainBar li').mouseover(function () {
$(this).find('.subBar').show();
console.log('over');
});
$('.mainBar li').mouseout(function () {
$(this).find('.subBar').hide();
});
});
This is the jsfiddle
I was able to achieve a content switcher with the block of code below but I'm looking for a way to simplify it. There are up to 10 or more topics to switch between, how do I simplify it so that the code wouldn't be too large, instead of having a block of code per DIV.
jQuery(document) .ready(function () {
$('.topic-intro:not(:nth-of-type(1))') .hide();
$('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
$('#mid-nav-in ul li a:nth-of-type(1)') .click(function () {
$('.topic-intro:not(:nth-of-type(1))') .hide();
$('.topic-intro:nth-of-type(1)') .show();
$('#mid-nav-in ul li:not(:nth-of-type(1))') .removeClass('active');
$('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
});
});
jQuery(document) .ready(function () {
$('#mid-nav-in ul li:nth-of-type(2) a') .click(function () {
$('.topic-intro:not(:nth-of-type(2))') .hide();
$('.topic-intro:nth-of-type(2)') .show();
$('#mid-nav-in ul li:nth-of-type(2)') .addClass('active');
$('#mid-nav-in ul li:not(:nth-of-type(2))') .removeClass('active');
});
});
It appears from your code that you are using the links in #mid-nav-in to show the corresponding .topic-intro and then hiding all others. It also appears that the code depends on the .topic-intro elements being in the same order as the links in the #mid-nav-in. If this is the case something like to following would work:
$('#mid-nav-in li a').on('click', function(){
// Remove 'active' Class from all <li/>
$('#mid-nav-in li').removeClass('active');
// Add 'active' Class to <li/> of Clicked Link
$(this).closest('li').addClass('active');
// Hide All .topic-intro elements
$('.topic-intro').hide();
// Show .topic-intro element at the Same index of Clicked Link
$('.topic-intro').eq($(this).closest('li').index()).show();
return false; // prevent default action
});
// Automatically Select the First Link
$('#mid-nav-in li a').eq(0).trigger('click');
Here is a fiddle as an example: http://jsfiddle.net/6hd97/2/
I hope this helps.
I have menu with 2 submenus. Using jQuery I want to higlight hovered item. I can't solve how to higlight parent item, when cursor is on the child item. For hovering I used class caled active:
.vertical-active {
background:#0F6;
}
Jquery function looks like this:
$(document).ready(function (e) {
$('.submenu a').hover(
function () {
$(this).addClass('vertical-active');
$(this).parent('vertical-links a').addClass('vertical-active');
},
function () {
$(this).removeClass('vertical-active');
$(this).parent('vertical-links a').removeClass('vertical-active');
});
});
Problem is in parent selector, but I don't know how to select submenu's parent item.
JSFiddle link:http://jsfiddle.net/6g9tZ/4/
$(document).ready(function() {
$('.submenu a').on('mouseenter mouseleave', function() {
$(this).add($(this).closest('ul').closest('li').children('a')).toggleClass('vertical-active');
});
});
FIDDLE
EDIT:
to highlight the parent as well, you'd do
$('.vertical-links > li > a').on('mouseenter mouseleave', function() {
$(this).toggleClass('vertical-active')
});
FIDDLE
Use .siblings in addition to .closest.
FIDDLE
$(document).ready(function (e) {
$(".vertical-links > li > a").on("mouseenter mouseleave", function(){
$(this).toggleClass('vertical-active');
});
$('.submenu a').on("mouseenter mouseleave",function () {
$(this).toggleClass('vertical-active');
$(this).closest("ul").siblings("a").toggleClass('vertical-active');
});
});
Replace the relevant parts of your code with:
$(this).parents('li:eq(1)').find("> a").addClass('vertical-active');
....
$(this).parents('li:eq(1)').find("> a").removeClass('vertical-active');
One problem with your code is that you were looking for a "parent <a>", but there is no such thing; the <a> is a child of your parent. So here we search for a parent <li>, not the immediate, but actually the grandparent, find its direct <a> child and highlight it.
Additionally you had parent('vertical-links') which should be parent('.vertical-links') (not the dot: its a class not an element).