Open a sub-menu using jQuery

Question

I have this menu:

enter image description here

What I want to do: when I click the image button on the right (#sub-menu) I want it to open the sub-menu (.sports2).

this is a sub-item html code for an example:

                <a href="#"><li> Golf  
                    <img src="strokesmenu.png"  id="sub-menu" />
                    <ul class="sports2">
                        <a href="#" class="selected"><li>British Open</li></a>
                        <a href="#" class="selected"><li>Masters</li></a>
                        <a href="#" class="selected"><li>PGA Championship</li></a>
                        <a href="#" class="selected"><li>US Open</li></a>
                    </ul>
                </li></a>

Why this code isn't working for me?

$('#sub-menu').click(function(){
    //$('.sports2').slideToggle("slow");
    $(this).find('ul>li').slideToggle(slow);
})

Your Markup is Invalid a tags can't be direct childs of the ul element. — DaniP
– DaniP, Commented Dec 2, 2014 at 14:03
Also, seems you are using #sub-menu multiple times, which is invalid. — Jose Rui Santos
– Jose Rui Santos, Commented Dec 2, 2014 at 14:04
Also find will search inside the element ... but the submenu isn't inside the img of course, so you need to use next() or another method — DaniP
– DaniP, Commented Dec 2, 2014 at 14:08
.next() will not work according to HTML it's wrong HTML structure. Look at source code. — Shirish Patel
– Shirish Patel, Commented Dec 2, 2014 at 14:26

Onur Topal · Accepted Answer · 2014-12-02 18:03:18Z

2

first of all, <a href="#" class="selected"><li>British Open</li></a> this structuring is so wrong I cannot even describe it how wrong it is.

convert it to the <li><a href="#" class="selected">British Open</a></li> if you want to make click-able while li try using below css or similar to that

ul li a { display: inline-block; width:100%; height:100%; }

also there must be only one item with one id having multiple item is against the W3C rules and clicking the little icon is not so user friendly. so instead give class to main item li and hanle the click with that one.

$('li.main').click(function(){
    $(this).find('ul').slideToggle('slow');
})

apparently you cannot do that so you have to bind it to the img first change id to the class e.g. class="sub-menu"

$('li img.sub-menu').click(function(){
    //$(this) -> img .next() -> ul
    $(this).next().slideToggle('slow');
})

now the $(this).find('ul>li').slideToggle('slow'); should work but it will open every li and might cause some problem issues.

instead I suggest using $(this).find('ul').slideToggle('slow'); so the list can be opened/closed. you see the animation differences by trying it and choose the best one for you.

EDIT FOR CLICK BUG: well not sure if I get it right but as I understand in some cases you need to redirect the page in others open the sub menu. in that case you can check if the li has submenu or not the following code should do the trick.

$('li.main').click(function(){
    if ($(this).has("ul")) // if has submenu
        $(this).find('ul>li').slideToggle('slow');
     else
        // your redirect code.
})

edited Dec 2, 2014 at 18:03

answered Dec 2, 2014 at 14:10

Onur Topal

3,0611 gold badge26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Jose Rui Santos Over a year ago

What you need is $(this).next('.sports2').slideToggle('slow');. this is the image.

Onur Topal Over a year ago

yeah just notice the problem and updated my answer accordingly.

Jose Rui Santos Over a year ago

Now is ok, but you still need slideToggle('slow') unless slow is a variable.

Imnotapotato Over a year ago

what does "main" stand for?

Onur Topal Over a year ago

main li is the li item Golf text in it.

|

Collectives™ on Stack Overflow

Open a sub-menu using jQuery

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related