Question

有类似的代码可以使用，只是无法使用此实例。

使用jquery更改链接上方div的CSS以隐藏子区域（currently stays open because link href="#"）。

所有链接都有“团队”类，一旦点击其中任何一个，应将subnav更改为display =“none”

代码是：

$('a.team').click(function() {
    $('.subnav', this).css('display','none'); 
});

jsfiddle：http://jsfiddle.net/a9AYE/

Answer 1

你提到了

使用jquery更改链接上方div的CSS以隐藏 subnav

所以，猜测一下，你的HTML是这样的

<div class="subnav">Div Above the link One</div>
<a class="team" href="#">Link One</a>
<div class="subnav">Div Above the link Two</div>
<a class="team" href="#">Link Two</a>

所以，你可以使用这样的东西

$('a.team').click(function(e) {
    e.preventDefault();
    // Hide the div with class ".subnav" that is right above/brfore this link
    $(this).prev('.subnav').css('display','none'); 
});

DEMO.

P / S：你本应该发布你的HTML。

Answer 2

您应该使用closest（因为subnav是.team元素的祖先）

$(this).closest('subnav').css('display', 'none');

最好使用class来更改样式，而不是定义样式inline

.hide{
    display: none;
}

只需添加一个类即可应用特定的类。更干净，更少杂乱。

同时阻止遵循链接的默认操作。

$('a.team').click(function (e) {      
    e.preventDefault();
    $(this).closest('.subnav').addClass('hide')
});
// This is to remove the hide class
// which has more specificity
$('.nav > li').mouseover(function (e) {   
    $('.subnav').removeClass('hide')
});

在此示例中，您将遇到specificity个问题。

当您设置内联display:none时，您只能通过再次指定内联来覆盖它。

改用类。你再次看到同样的问题。但是编写一个更具体的类应该可以解决这个问题。而且你的CSS看起来应该如下所示。

<强> CSS

.nav > li .subnav {
    display:none;
}
.nav > li:hover .subnav {
    display:block;
}

.nav > li .hide.subnav{
    display: none;
}

Jquery在click事件上更改类CSS

2 个答案:

的 Check Fiddle