Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Instead of hover, how can i make on click?

HI,

If you look on this codepen , if you hover over the links, and the submenu appears, and you take the mouse off that, it disapear.

How can i make so i need to click the menu, and it will stay like that, no matter if the mouse is off that? Like bootstrap has. Im trying to recreate bootstrap basically. On click show, on click hide.

2 Answers

Alec Plummer
Alec Plummer
15,181 Points

What you want is the slideToggle() method. Also, add display: none; to your .sub-menu class in css if you want it hidden by default. 

$(document).ready(function() {
    $('.dropdown').on('click', function() {
        $(this).children('.sub-menu').slideToggle(200);
    });
});
Konrad Pilch
Konrad Pilch
2,435 Points

Thank you xdd soo simple.

What about if i click away from it, and it disapears? I mean, right now it works only on the mother link if i click it shows etc.. what about if i click on the screen for exmapel? to hide it.

Konrad Pilch
Konrad Pilch
2,435 Points

Oh, now i got a problem that when i click the input, it slides up : p how can i prevent it?

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

input prob.

$('input').click(function (e) {
    e.stopPropagation();
    $(this).focus();
});
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

What about if i click away from it, and it disapears?

create an element(any element let's say div with id hide) in your html and bind your click handler to it and hide your submenu.

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

And for the record, input problem, not my solution :P

Konrad Pilch
Konrad Pilch
2,435 Points

Thank you :) I understand. Step by step. :D