使用css和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.

我正在尝试制作一个使用css和jquery的菜单,但我现在遇到问题几天试图找出如何定位特定元素。

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

$("#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.

尝试将鼠标悬停在该容器上,然后单击箭头。事情是他们都在同一时间显示,我只是无法想出我的出路..我刚接触到jquery,我知道这可以做..请帮助..顺便说一下,我还不确定这些是否有效8及以上,但我也要考虑到这些......提前感谢。

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

更新:我想我问了一些错误的问题,因为我需要在不使用ID的情况下对其进行编码,因为每个“配置文件”都是唯一的并且由后端人员控制,我唯一的选择是使用jquery控制CSS(至于我的知识去)。我确实尝试过使用纯CSS,但是我在IE中遇到“:active”的问题=(所以我查看了jquery,希望所有的都设置好了。谢谢大家!

4 个解决方案

#1

Here's the FIDDLE

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

注意:如果要在多个元素上使用它,则只能使用id一次而不是使用class。好? :)

#2

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:

问题是你的箭头div和ul div具有相同的ID。 ID必须在页面中是唯一的。尝试更改div的id,使其独特,如下所示:

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

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

然后更新你的jquery选择器来实现你的结果,如下所示:

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

#3

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.

注意:不要对多个元素使用相同的ID。请改用类。

#4

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

在您的代码中,您将id为“arrow”的组件绑定到click事件,只需为每个div创建不同的id,如“arrow1”和“arrow2”,并链接click事件

#1