Jquery在点击事件上更改类CSS答案

【问题标题】：Jquery change class CSS on click eventJquery在点击事件上更改类CSS
【发布时间】：2013-08-12 00:48:30
【问题描述】：

有类似的代码可以工作，只是不能让它与这个实例一起工作。

使用 jquery 更改链接上方 div 的 CSS 以隐藏 subnav (currently stays open because link href="#")。

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

代码是：

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

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

【问题讨论】：

你能显示HTML.. 最好使用类而不是设置内联样式
一个 jsFiddle 会很棒。

标签： jquery css class onclick

【解决方案1】：

你提到

使用jquery改变链接上方div的CSS隐藏子导航

所以，你猜你的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。

【讨论】：

【解决方案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 inline 时，您只能通过再次指定 inline 来覆盖它。

改用类。你又看到了同样的问题。但是编写一个更具体的类应该可以解决这个问题。你的 CSS 应该如下所示才能正常工作。

CSS

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

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

Check Fiddle

【讨论】：