I have a dropdown menu which is expanded by clicking. The menu is collapsed by default. I would like the menu to appear to be expanded if one of the sub menu pages is active. I hope that's clear. Here is my code.
HTML
<li class="dropdown">
<a class="disablelink" href="#">Carbohydrates, proteins & fats</a>
<ul class="sub_navigation">
<li>Carbohydrates</li>
<li>Proteins</li>
<li>Fats</li>
</ul>
</li>
jQuery
$(document).ready(function() {
$('.dropdown').click(function() {
// When the event is triggered, grab the current element 'this' and
// find it's children '.sub_navigation' and display/hide them
$(this).find('.sub_navigation').slideToggle();
});
$(".disablelink").click(function(e) {
e.preventDefault();
});
});
So if the user is on carbohydrates.php, proteins.php or fats.php i would like the menu to be expanded. I don't know how to do this though. Can anyone help?
When a page is active you would need to give it's link an additional class, for example;
<li class="current_page">Carbohydrates</li>.
Then you can use jQuery to loop through the menu and expand it if any menu item have the class.
$('.dropdown li').each(function() {
if ($(this).hasClass('current_page')) {
$(this).closest('.sub_navigation').slideDown();
}
});
Demo: http://jsfiddle.net/R7gkw/
Related
I have lots of li's in this mobile menu. I'm trying to get these li >a's to close when I click on them again. I got them to open fine with the 'show' class, but the div class doesn't close again when I click on it. Any idea what's going on?
I tried to get it to when on click go to the parent (the li) and the find the child named '.dropdown-submenu--dp-0' and then toggle the show class. But it doesn't toggle. Only adds.
<li id="menu-item-3291" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3291 nav-item dropdown">
Solutions
<div class="dropdown-submenu dropdown-submenu--dp-0">
<a href="/solutions" class="nav-link dropdown-
item">Identity Platform Overview</a>
</div>
</li>
</div>
$('.dropdown-toggle--submenu').on('click', function(e){
// to close all lis and then only open the one selected.
$('.dropdown-toggle--submenu').each(function(){
$('.dropdown-submenu').removeClass('show');
})
// toggle show
$(e.target).parent().find('.dropdown-submenu--dp-0').toggleClass('show');
});
You should use $(this)
see: https://api.jquery.com/each/
$(this).removeClass('show');
If you want to remove the class show.
However for toggling (inverse) visibility with jquery use https://api.jquery.com/toggle/
Or if you definetly want to hide the visible elements use https://api.jquery.com/hide/
I have a sidebar list of items in HTML on a bootstrap page and i would like the last clicked item to be highlighted with a "active" class. I was wondering how i can get the whole list (ul) like an array so i could highlight a certain item (li) or highlight the last clicked item.
The list is structured like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar sidebar-style">
<ul class="nav nav-sidebar sidebar-scrollable">
<li class="active">Home</li>
<li>Site 001</li>
<li>Site 002</li>
<li>Site 003</li>
<li>Site 004</li>
<li>Site 005</li>
What i need is some JS code which can set the last clicked li item to class="active" but still have the option to set any of the li items to the active one, for example if i wanted to have a random button and it selected item 4 then 2 etc. I guess the main thing i need is a way to have all list items like an array.
I strongly suggest you use jQuery which is kind of simulating DOM manipulation like an array or more precisely an object.
My suggestion would be the following:
$(".nav-sidebar").on('click', 'li', function(e) {
$(this).parent().find('li.active').removeClass('active');
$(this).addClass('active');
});
This code is removing the active class from all li items, and adding active class to currently clicked li item.
Cheers,
Edit PS:
You could also bind your event directly like this:
$(".nav-sidebar li").click(...);
But the purpose of using .on() is that it will bind the event dynamically, so that if you decide to add a new li to your $(".nav-sidebar") element, it will also trigger the event on that element.
Edit:
To answer #zeddex your question: How to select manually li 4?
You simply use the following:
$("li:eq(3)").trigger('click');
That'll manually trigger a click event for li 4. If you want to select a specific li you can use a method of the like: :eq(x) in which x is the position of the li item you want to reach starting from 0 which corresponds to your first li. Have a look at jQuery DOC on that: jQuery DOC on :eq()
So I've painfully got multiple drop-downs toggling states(hidden and shown) in JQuery but I have some code which tells the side bar which page is active and gives it the style active and I would like a drop down to not be hidden if there is a child active in it.
The top level link which you click to view the drop-down gets given the id "HAC"(has active child) if it has an active child but I think I might be burning my brain out on this.
Here's a jsfiddle page with the working demo of the problem.
the drop down is set out like this in a nav
<ul id="HAC" class='topLevel'>
<li class='subItem'>
<a class="active" href='thatpage.php'>That page</a>
</li>
<li class='subItem'>
<a href='thatotherpage.php'>That other page</a>
</li>
</ul>
thanks in advance for any help
I think what you are looking for is the jQuery :not selector. Here is an update to your fiddle
function dropDowns() {
//for each toplevel li a
$(".topLevel:not(#HAC) li a").each(function() {
//hide subitems if not HAC (has active children)
$(this).hide();
});
//Toggle show them on click
clickToggle();
}
I am trying to link navigation menu items and jQuery tabs together. That means I have two submenu items just think those are category and item and also I have 2 tabs in my page, those are My category and My Items.
What I am trying to do using this is I want to open My category tab when I click on the link category from submenu and vice versa. And also I want to open My Item tab when I click on the link item from the submenu and vice versa.
I tried it doing with jQuery but can't get to work correctly.
My HTML -
<ul id="new-menu">
<li class="dropdown-holder" id="">
<a>My Menu</a>
<div class="dropdown">
<div class="menu-container">
<div class="menu-link">
my sub menu 1
</div>
<div class="menu-link">
my sub menu 2
</div>
</div>
</div>
</li>
<li class="dropdown-holder" id="">
<a>Category & Item</a>
<div class="dropdown">
<div class="menu-container">
<div class="menu-link">
Category
</div>
<div class="menu-link">
Item
</div>
</div>
</div>
</li>
</ul>
<div id="main">
<ul>
<li>Category</li>
<li>Item</li>
</ul>
<div id="tabs-1">
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your.</p>
</div>
<div id="tabs-2">
<p>On the Insert tab, the galleries include other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your.</p>
</div>
</div>
This is my jQuery:
function setCurrent(element) {
$('div').removeClass('current');
$(element).parent().addClass('current');
}
$('#cat_link').click(function() {
$('#tabs-1').hide();
$('#tabs-2').show();
setCurrent(this);
$('#ui-id-2').parent().removeClass('ui-tabs-active ui-state-active');
$('#ui-id-2').parent().addClass('ui-state-default ui-corner-top');
$('#ui-id-1').parent().removeClass('ui-state-default ui-corner-top');
$('#ui-id-1').parent().addClass('ui-tabs-active ui-state-active');
return false;
});
$('#item_link').click(function() {
$('#tabs-2').hide();
$('#tabs-1').show();
setCurrent(this);
$('#ui-id-1').parent().removeClass('ui-tabs-active ui-state-active');
$('#ui-id-1').parent().addClass('ui-state-default ui-corner-top');
$('#ui-id-2').parent().removeClass('ui-state-default ui-corner-top');
$('#ui-id-2').parent().addClass('ui-tabs-active ui-state-active');
return false;
});
This is JS Fiddle
You can see it is working in some manner but not perfectly. Reverse order also not working. Reverse order mean I need to select submenu item according to clicks on tabs.
UPDATE -
According to above JSFiddle
If I click on category link from submenu category tab is opening but its content display from item tab.
If I click on item link from submenu item tab is opening but its content from category tab.
Hope someone will help me.
Thank you.
You can make it simpler: Use right methods to do the job. You are not utilizing jquery ui tabs events /methods.
$("#main").tabs({
activate: function (event, ui) { // subscribe to tab activate
var target = '.menu-link [data-target=#' + ui.newTab.attr('aria-controls') + ']'; // Get the ID of the tab activated. aria-controls on the rendered tab div will give the id of the tab anchor. so get the target as the menu link which has the data-target as that of the id of the current tab.
addCurrent(target); // set up corresponding menu link
}
});
$('.menu-link a').click(function (e) {
e.preventDefault(); // This is required to prevent the default action on click of an anchor tab.
var target = $(this).data('target'); // Get the target repsective to the clicked menu. This is jquery data() to retreive data attribute value.
$("#main").tabs("option", { //Use right method to do the job. set which tab to be opened by using the jquery ui tabs option overload.
'active': $(target).index() - 1 // set the index of the tab to be opened. Get the index using .index() on the target which is the tab anchor and set that as active.
});
addCurrent(this); // set up style for the current menu link
});
function addCurrent(elem) {
$('.current'). // select the currently activated elements
not($(elem) // but not this one if clicked on itself
.closest('.menu-link') // get the closest(Use this instead of parent(), closest is recommended to parent)
.addClass('current') // add the class to the new menu
).removeClass('current'); // remove from existing ones.
}
Minor addition to your markup adding a data-target on your menu link to point to the tab:
Category
Demo
References:
tabs.activate
closest()
index()
tab options
.not()
This is all you need:
$("#main").tabs();
$('.menu-container .menu-link a').on("click", function() {
// get the position of the menu we clicked inside
var menu_ind = $(this).parents('.dropdown-holder').index();
// if not in the submenu we care about, go about default behavior
if( menu_ind != 1 ) return;
// get the position of the link
var ind = $(this).parents('.menu-link').index();
// activate the corresponding tab
$("#main").tabs('select', ind);
return false;
});
it's just tweaks based on the link I posted.
Fiddle: http://jsfiddle.net/925at/1/
You should include at least a snippet of the HTML that would put your jquery code in context so future visitors don't have to rely on jsfiddle.
It looks like you are calling hide/show on the wrong divs.
If #tabs-1 holds your category content, and #tabs-2 holds your item content, shouldn't clicking on #cat-link show #tabs-1 and not hide it?
I have built a simple dropdown list which I populate with various links. It contains about 50 items, so I wrapped it in a div to make it scrollable. Problem is, when I mouseout, I lose the whole list, unless the first two list elelments are showing. I have constructed this dropdown as a submenu, with the first two links as the 'container' of sorts.
I somewhat understand why I am losing the entire list, but can't figure out how to make the top links reapear on mouseout.
$('.myMenu > li').bind('mouseover', openSubMenu);
function openSubMenu() {
$('.myMenu').css('overflow','auto');
$('.myMenu').css('height','400px');
$('.ulMenu').css('visibility', 'visible');
};
$('.myMenu > li').bind('mouseout', closeSubMenu);
function closeSubMenu() {
$('.myMenu').css('overflow','hidden');
$('.myMenu').css('height','20px');
$('.ulMenu').css('visibility', 'hidden');
}
}
</script>
<div id="menu">
<ul class="myMenu">
<li id="li_left"> Application </li>
<li id="li"> Hover For Listing
<ul id="tasksUl" class="ulMenu">
</ul>
</li>
</ul>
</div>
I think you also have to post your .css for the list. I think you got a menu and you wanna open a list on hovering <li id="li"> Hover For Listing
You are setting a
$('.myMenu').css('height','20px');
and I don't get why you would do that. Also your .css styles are pretty much deprecated.
Check the fiddle here: http://jsfiddle.net/eR2y9/1/
Works like a charm. There is no need for you to add a height for the menu because it's dynamically adjusting depending on the amount of entries inside. Also if set to display none it's not taking any space away.. If you have further questions or if I misunderstood your problem feel free to reply to my post and I will find a solution for ya.