使用 css 和 jquery 的下拉菜单答案

【问题标题】：dropdown menu using css and jquery使用 css 和 jquery 的下拉菜单
【发布时间】：2013-05-27 01:31:18
【问题描述】：

我正在尝试制作一个使用 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;
}

$("#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 上查找并希望一切都设置好了。谢谢大家！！！

【问题讨论】：

删除贾斯汀比伯，一切都会好起来的。（对不起，我不得不这么说）

标签： jquery css drop-down-menu

【解决方案1】：

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

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

然后更新您的 jquery 选择器以实现您的结果，如下所示：

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

【讨论】：

【解决方案2】：

这是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。好的？ :)

【讨论】：

谢谢！！我想这就是我要找的！自过去 3-4 天以来一直在努力解决这个问题，哈哈。顺便说一句，我是新来的，有没有办法像我在其他帖子中看到的那样增加声誉？

【解决方案3】：

使用$(this):

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

JSFiddle

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

【讨论】：

【解决方案4】：

在您的代码中，您将 ID 为“arrow”的组件绑定到点击事件，只需为每个 div 设置不同的 ID，如“arrow1”和“arrow2”并链接点击事件

【讨论】：