使用css和jquery的下拉菜单

Question

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

这是我的演示

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

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

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

Answer 1

这是FIDDLE

在jquery中:

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

});


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

在HTML中:

更新<div id="arrow"到<div class="arrow"

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