2

我正在尝试制作一个使用 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 上查找，希望一切都设置好了。谢谢大家！！！

4

4 回答 4

7

这是小提琴

在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。好？:)

于 2013-05-31T09:13:51.450 回答
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");
});
于 2013-05-31T09:13:27.250 回答
1

使用$(this)：

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

JSFiddle

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

于 2013-05-31T09:14:17.343 回答
0

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

于 2013-05-31T09:14:30.937 回答