dropdown menu using css and jquery

Question

I'm trying to make a menu that's using css and jquery but i'm having problems for days now trying to figure out how to target the specific element.

here's my demo

CSS

    .contain {
    width:150px;
    height:150px;
    background-color:blue;
}
.contain:hover #arrow {
    cursor:pointer;
    display:block;
}
.show {
    display:block;
    background-color:green;
}
.hide {
    display:none;
}

JS

$("#arrow").click(function () {
    $("div > ul").css("display", "block");

});


$(".contain").mouseleave(function () {
    $(".contain > ul").css("display", "none");
});

Try to hover on that container, then click the arrow . the thing is they both show at the same time and i just can't figure my way out.. im new to jquery and i know this can be done.. please help.. btw, im not yet sure if these work on ie 8 and above but i have also to take these in mind... thanks in advance.

UPDATE: I guess i asked somewhat the wrong question, cause i needed to code it without using ID, cause each "profile" will be unique and be controlled by the backend guys and my only choice was to control CSS using jquery (as far as my knowledge goes). I did tried using pure CSS, but i am having problems with ":active" in IE =( so i look up on jquery and hopefully all is set. thanks all!!!

remove justin bieber, and everything will work. (sorry I had to say that) — BeNdErR
– BeNdErR, Commented May 31, 2013 at 9:15

Vond Ritz · Accepted Answer · 2013-05-31 09:24:04Z

7

Here's the FIDDLE

in jquery:

$("div.arrow").click(function () {
    $(this).next('ul').css("display", "block");

});


$(".contain").mouseleave(function () {
    $(".contain > ul").css("display", "none");
});

in html:

update <div id="arrow" to <div class="arrow"

Note: You can use id only once instead use class if you want to use it on several elements. Ok? :)

edited May 31, 2013 at 9:24

answered May 31, 2013 at 9:13

Vond Ritz

2,01215 silver badges15 bronze badges

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

1 Comment

user2056915 Over a year ago

thanks!! i think this is the one im looking for! been working on this since the last 3-4 days lol. btw, im new here and is there a way to add reputation like i see in other post here?

BeNdErR · Accepted Answer · 2013-05-31 09:13:27Z

1

The problem is that bot your arrow div and ul div have the same ID. ID must be unique in the page. try changing the div's id making 'em unique, like this:

http://jsfiddle.net/jjy6y/4/

and then update your jquery selector to achieve your results, like this:

$("#arrow1").click(function () {
    $("#dropdown1").css("display", "block");
});
$("#arrow2").click(function () {
    $("#dropdown2").css("display", "block");
});

answered May 31, 2013 at 9:13

BeNdErR

18k21 gold badges79 silver badges106 bronze badges

Comments

Vucko · Accepted Answer · 2013-05-31 09:14:17Z

1

Use $(this):

$("#arrow").click(function () {
    $(this).parent().find('ul').css("display", "block");
});

JSFiddle

Note: don't use the same ID for multiple elements. Use classes instead.

answered May 31, 2013 at 9:14

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

Comments

Jaay · Accepted Answer · 2013-05-31 09:14:30Z

0

In your code you are binding the component with id "arrow" to the click event, just make different id like "arrow1" and "arrow2" for each div and link the click event

answered May 31, 2013 at 9:14

Jaay

2,1411 gold badge17 silver badges34 bronze badges

Collectives™ on Stack Overflow

dropdown menu using css and jquery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related