jquery - 使用 css 和 jquery 的下拉菜单

Question

我正在尝试制作一个使用 css 和 jquery 的菜单，但我几天来遇到问题，试图弄清楚如何定位特定元素。

这是我的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");
});

尝试将鼠标悬停在该容器上，然后单击箭头 。问题是它们同时显示，我只是想不出出路..我是 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，则只能使用 id 一次，而不是使用 class。好的？ :)