Hello all,

 

I'm designing a website using Sharepoint 2013 and I've designed a snippet of jquery to display a menu when then user hovers over a side menu, (which in turn contains a sub menu within one of its links).

 

This works fine but unfortunately when the user clicks on other links on the menu the same sub menu is activated. If you've worked with Sharepoint before you will know that it generates its own code, (including div tags, which are all the same). Here's the code:

 
 $(document).ready(function () {
 
    $('#zz13_RootAspMenu > li > a').mouseover(function() {
    $('#zz13_RootAspMenu li ul').slideDown();
})
 
$('#zz13_RootAspMenu > li > a').mouseout(function() {
$('#zz13_RootAspMenu li ul').delay(2000).slideUp();
})
});
 

As I mentioned earlier Sharepoint generates its own div tags and I can't go into the code itself. Whenever the user clicks on any one of the links in the sub menu it activates the link which contains the sub menu, plus, to make matters worse the same side nav bar contains multiple links, some of them have sub menus so whenever the user clicks any link within the side nav all of the sub menus are activated and are shown.

 

If anyone knows of a way jquery can check exactly which link has been clicked then please let me know. I've googled everywhere but nothing comes up. Can anyone help?

 

Thanks in advance.

Edited March 12, 201511 yr by Dredd2000

You need to learn how to traverse the DOM. jQuery provides a load of methods for you to do this such as next() which selects the next sibling. Here's the API for it http://api.jquery.com/category/traversing/ Once you have the appropiate node selected then you can add on a click handler to it.

 

Take note: what you a trying to do is generally considered bad practice because one little change to the html could prevent your code from working. you are far better off building a menu system from scratch if you want specific functionality rather than hacking something else into something it was never designed to do.

Edited March 13, 201511 yr by rbrtsmith

^ what he said.

Are you sure the link in question does not have a unique identifier or a "hasChildren"-class that you can target?

If not you might need to use the nth-child selector.

 

Say your link is the 2rd li element in the menu (check the generated source code to make sure there are no hidden "skip to content" link or similar in a li tag)

You can then target the 2'nd link with something like this:

$( '#zz13_RootAspMenu li:nth-child(2)').mouseover(function() {
    $('#zz13_RootAspMenu li ul').slideDown();
});

Or:

$( '#zz13_RootAspMenu li:nth-child(2) a').mouseover(function() {
    $('#zz13_RootAspMenu li ul').slideDown();
});

(Not tested)

Note the seletor returns a nodelist (not a unique element) so you might need to attach the slideDown function in a loop.

As Rbrtsmith points out this solution is not good if you need a scalable system. If anyone adds a new menu item before your link the wrong element will be targeted.

 

IMPORTANT EDIT!

Come to think about it it will be better to target the link through the slidedown elements parent selector:

$( '#zz13_RootAspMenu li ul').parent().mouseover(function() {
    $('#zz13_RootAspMenu li ul').slideDown();
});

That way it does not matter what number your menu item is

Edited March 13, 201511 yr by Nillervision