We Keep Coding

Show Dropdown Menu Item if Current page is Its Child

I am working on a project on wordpress and making a main menu where all dropdown items are showing normally without hovering on it. I have hide all dropdown column at home page now I want to display specific dropdown if current page is its child item or main item. For example.
<ul class="menu">
<li class="menu-item">Page 1
<ul class="sub-menu active">
<li class="menu-item current_page_item">Page 1 Child A</li>
<li class="menu-item">Page 1 Child B</li>
<li class="menu-item">Page 1 Child C</li>
</ul>
</li>
<li class="menu-item">Page 2
<ul class="sub-menu">
<li class="menu-item">Page 2 Child A</li>
<li class="menu-item">Page 2 Child B</li>
<li class="menu-item">Page 2 Child C</li>
</ul>
</li>
<li class="menu-item">Page 3
<ul class="sub-menu">
<li class="menu-item">Page 3 Child A</li>
<li class="menu-item">Page 3 Child B</li>
<li class="menu-item">Page 3 Child C</li>
</ul>
</li>
</ul>
Now I want to show just Page 1 dropdown and if user goes to Page 2 (or then Page 2 Child A/B/C) then hide Page 1 dropdown and show Page 2 dropdown.
Please let me know if how can I do this by CSS or Javascript. CSS will be easy for me.
Thanks

I found a solution because after some struggle with lots of Classes and IDs I finally found a unique class with sub-menu so I hide all sub menu by
.menu-item ul
{
display: none;
}
After that I show active dropdown menu by
.menu-item .active {
display: block !important;
}
Thanks

Change dropdown caret on click of other LI item

I'm creating a website and having trouble with some carets on my dropdown.
I have a sidebar like so:
Home
Menu item >
Menu item 2 >
Menu item 3 >
When I click on a menu item the little caret icon goes from > to v and expands the dropdown content like so:
Home
Menu item v
Sub-menu item
Sub-menu item 2
Menu item 2 >
Menu item 3 >
If I click on Menu item v - the caret goes from v to > again which is correct.
However, if I click on Menu Item 2 > for example, menu item 2 opens, but the caret on menu item stays as v like so:
Home
Menu item v
Menu item 2 v
Sub-menu item
Sub-menu item 2
Menu item 3 >
How do I get it so when Menu item 2 has been clicked, menu item v will change back to menu item >
I have this as my JS
$('.dropdown').click(function(){
$(this).find('.nav-arrow').toggleClass('fa-angle-left fa-angle-down');
});
$('.dropdown').click(function(){
$('.collapse').collapse('hide');
})
My drop down looks like this:
Home
<li class="dropdown"><a data-toggle="collapse" href="#">Menu item<i class="nav-arrow fa fa-angle-left pull-right"></i></a>
<ul class="collapse">
<li><a href="#">Sub menu item</li>
<li>Sub-menu item 2</li>
</ul>
</li>
<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 2 <i class="nav-arrow fa fa-angle-left pull-right"></i></a>
<ul class="collapse">
<li><a href="#">Sub menu item</li>
<li>Sub-menu item 2</li>
</ul>
</li>
<li class="dropdown"><a data-toggle="collapse" href="#">Menu item 3 <i class="nav-arrow fa fa-angle-left pull-right"></i></a>
<ul class="collapse">
<li><a href="#">Sub menu item</li>
<li>Sub-menu item 2</li>
</ul>
</li>

What you need to do is first convert all of the <li> elements to a left-facing caret, and then only change the target element back. Unfortunately, as there's no (simple) way to know which carets are open and which are closed, it's best to change them explicitly:
$('.dropdown').click(function(){
$('.nav-arrow').removeClass('fa-angle-down');
$('.nav-arrow').removeClass('fa-angle-left');
$(this).find('.nav-arrow').removeClass('fa-angle-left');
$(this).find('.nav-arrow').addClass('fa-angle-down');
});
Hope this helps!

I think this will handle the case where you have toggled a menu open and close and if you have toggled the menu by selecting another entry in the menu.
jQuery(".dropdown").click(function(event){
// Evaluate the target of the click event was already opened.
if(jQuery(event.target).hasClass("fa-angle-down")){
// Change the caret to looks like they are closed.
jQuery(event.target).removeClass("fa-angle-down").addClass("fa-angle-left");
// Evaluate the target of click event was not opened.
}else{
// Remove any opened menu items carets.
jQuery(".dropdown.fa-angle-down").removeClass("fa-angle-down").addClass("fa-angle-left");
// Add the appropriate caret to the newly opened menu item.
jQuery(event.target).removeClass("fa-angle-left").addClass("fa-angle-down");
}
});
Let me know if you have any questions or if I can improve on this to make it better for you.

Hover an element, add class to another div with same class

I already found a part of my problem but it still needs work.
What i want to achieve is when i hover over a div, others divs should have class added to them if the original class is the same.
So let's start.
I have a menu:
<ul id="listz"><li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/'><span>Smoke vents</span></a>
<ul>
<li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/trape-de-fum/'><span>Trape de fum</span></a>
<ul>
<li><a href='/rokvent-simplu-canat'>RokVent Simplu canat</a></li>
<li><a href='/pheonix-dublu-canat'>Phönix Dublu canat</a></li>
<li><a href='/megaphonix'>Megaphönix</a></li>
<li><a href='/megastar'>MegaStar</a></li>
<li><a href='/firefighter'>Firefighter</a></li>
<li><a href='/smokejet'>SmokeJet</a></li>
<li class='last'><a href='/multijet'>MultiJet</a></li>
</ul>
</li>
<li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/trape-de-ventilatie-si-vizitare/'><span>Trape de ventilatie si vizitare</span></a>
<ul>
<li><a href='/rokvent-luminatoare-fixe'>RokVent(luminatoare fixe)</a></li>
<li class='last'><a href='/rokpas-luminatoare-acces'>RokPas(luminatoare acces)</a></li>
</ul>
</li>
</ul>
</li></ul>
As you can see i have Parent "Smoke vents" that has children.
The menu is on the left side. On the right side i will have a picture with a warehouse that has smoke vent elements. When you hover over them, they change color.
At that moment the menu needs to open and show the associated product that is in the menu. So when you hover over the element of the warehouse it should add class to the menu so i can change the background and show that that element is that product or products.
One problem is that i need it to match them by class (wich i will make unique by each element).
The second problem is that the menu does not open when i hover over a part of the image. If i have the menu open i can see the highlighted item in the menu.
This is the code that i got now and does the hovering part but only by matching in order.(what i mean is that if i add only to the parents the class it shows right but if i add to a child also then the last parent will not have a addClass):
<script type="text/javascript">
$("#listz1 li,#listz2 li").hover(function() {
var index = $(this).index();
$("#listz1, #listz2").each(function() {
$(".link1",this).eq(index).toggleClass("hoverz");
});
});
</script>

How do I include all children of a DOM element to be dragged using the Sortable plugin for MooTools?

I am using mootools-more.1817.js...this is my HTML structure:
<ul id="categories">
<div id="admin">Admin Controls</div>
<li class="selected">Test
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Test 2
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Top Links
<ul>
<li id="article">Link 1</li>
<li id="article">Link 2</li>
<li id="article">Link 3</li>
<li id="article">Link 4</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Lame Links
<ul>
<li id="article">Link 9</li>
<li id="article">Link 10</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Awesome Links
<ul>
<li id="article">Link 11</li>
<li id="article">Link 12</li>
</ul>
</li>
</ul>
So I want to do two things:
Be able to drag each li item to another section and have it take all its children with it. E.g. if I am dragging the li that has the link Top Links, I want to drag not only the words Top Links, but also the div#admin, ul and li that are children of that parent li. Essentially all the children of each li.
I would also like to be able to drag items between lists of the children. So for instance, say I want to drag the link Link 2 from that ul to the section called Awesome Links and drop it between the links Link 11 and Link 12.
I have done this:
window.addEvent('domready', function(){
new Sortables('#categories', {
clone: true,
revert: true,
opacity: 0.7
});
});
What that does is drags JUST the li, and not the children of the li.
How do I achieve those?
Thanks.

First, you have invalid HTML by having div items in your categories list that are not in li tags themselves. The only immediate children to a ul can be li for a valid list.
Second, according to the documentation, "To enable sorting between lists, one or more lists or id's must be passed using an array or a selector" (http://mootools.net/docs/more/Drag/Sortables). That means, to move items between your sublists, each ul must be passed into a sortables group (different than the categories group). This should solve your issue #2.
I'm not yet sure why it would not drag the whole contents of the li, though it may be the invalid HTML is causing issues.

Jquery list within a list menu

So I would like to build a unsorted list and and another unsorted list within it so there is a basic menu functionality.
I basically need to know how to have Jquery access the elements so when a main level item is clicked, its children show.
So for example:
<ul class="category-links">
<li>
<span>Category 1</span>
<ul class="sub-category-links">
<li>Sub-category 1</li>
<li>Sub-category 2</li>
<li>Sub-category 3</li>
</ul>
</li>
</ul>
I might have several of these. Essentially I set the subcategories to display:none and I want Jquery to allow for when I click on the "category-links", only its children are displayed.
Thanks!

You can do something like this:
$('.category-links li').click(function(){
$(this).find('.sub-category-links').show();
});