CODEWITHSUNDEEP
jquerycssdrop-down-menu
user2056915
user2056915

Reputation: 25

dropdown menu using css and jquery

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!!!

Upvotes: 2

Views: 656

Answers (4)

Vond Ritz
Vond Ritz

Reputation: 2012

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? :)

Upvotes: 7

Jaay
Jaay

Reputation: 2153

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

Upvotes: 0

Vucko
Vucko

Reputation: 20844

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.

Upvotes: 1

BeNdErR
BeNdErR

Reputation: 17927

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");
});

Upvotes: 1

Related Questions