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，我知道这可以做..请帮助..顺便说一句，我还不确定这些是否有效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");
});

in html：

将<div id="arrow"更新为<div class="arrow"

注意：如果要在多个元素上使用它，则只能使用id一次而不是使用类。好？：）

Answer 2

问题是你的箭头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");
});

Answer 3

使用$(this)：

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

JSFiddle

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

Answer 4

在您的代码中，您使用id＆＃34; arrow＆＃34;绑定组件。点击事件，只需制作不同的ID，如＃34; arrow1＆＃34;和＆＃34; arrow2＆＃34;对于每个div并链接click事件

使用css和jquery的下拉菜单

4 个答案: