-2

これに似たコードが機能するようになりましたが、このインスタンスで機能させることはできません。

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/

4

2 に答える 2

0

あなたが言及した

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'); 
});

デモ。

P/S: あなたも投稿するべきHTMLでした。

于 2013-08-10T01:32:06.150 に答える
0

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この例では問題が発生します。

inlineを設定display:noneすると、再度 inline を指定することによってのみオーバーライドできます。

代わりにクラスを使用してください。そして、同じ問題が再び発生します。しかし、より具体的なクラスを書くことで問題は解決するはずです。そして、CSS が機能するためには、以下のようになるはずです。

CSS

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

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

フィドルをチェック

于 2013-08-10T01:34:02.007 に答える