1

マウスオーバーでいくつかの div を表示しようとしていますが、動作するはずのコードが動作していません。おそらく私は next() を間違って使用していますか? 私は同じタイプのものを他の場所でうまく使用しているので、何が問題なのか少しわかりません。

フィドル。

コード：

$(".clause").mouseenter(function() {

    /* NOT WORKING */
    $(this).next("div.drawer-arrow").css("display","block");
    $(this).next("div.drawerBottom").css("display","block");

    $(".clause").css("border-bottom-right-radius", "0px");
    $(".clause").css("border-bottom-left-radius", "0px");

}).mouseleave(function(){

    /* NOT WORKING */
    $(this).next("div.drawer-arrow").css("display","none");
    $(this).next("div.drawerBottom").css("display","none");

    $(".clause").css("border-bottom-right-radius", "3px");
    $(".clause").css("border-bottom-left-radius", "3px"); 

});

$(".clause").click(function() {
    $(".clause").css("box-shadow", "none");

    /* WORKING */
    var tmp = $(this).next("div.drawer");
    if(tmp.is(":hidden")) {
        tmp.slideDown('2s');
        $(this).css("box-shadow", "0px 3px 5px #AAA");
    }
    else {
        tmp.slideUp('2s');
    }
});
4

4 に答える 4

1

next（）の代わりにnextAll（）を使用します。Next（）は、あなたの場合、あなたがターゲットにしているクラスではない次の要素をチェックするだけです。

于 2012-10-22T15:09:27.333 に答える
1

使ってみて.nextAll()

$(this).nextAll('.drawer-arrow').first().css("display","block");

.next()セレクターに一致する場合にのみ要素を選択します (それ以外の場合は空のセレクターを返します) ..

これを組み合わせて.first()、そのクラスのすべての要素ではなく最初の要素を取得できます

.nextAll()このような場合、現在の要素と次の要素の間の兄弟の数がわからない場合に使用することをお勧めします..

于 2012-10-22T15:19:48.390 に答える
1

以下を使用します。

$(this).next().next('.drawer-arrow').css("display","block");
$(this).next().next().next('.drawerBottom').css("display","block");

エクストラは要素.next()を選択し、次にもう一度 get 、次にもう一度 get します<div class="drawer">drawer-arrowdrawerBottom

編集：

複数回要素をドロップする.next()ことは、マークアップを変更してクエリ セクションをグループ化するよりも最適ではない可能性があります。より単純なセレクターを使用できるように、マークアップを再構築することを検討してください。

<div class="queryGroup">
    <div class="clause">...</div>
    <div class="drawer">...</div>
    <div class="drawer-arrow"></div>
    <div class="drawerBottom"></div>
</div>

イベントは次の.clause mouseenterようになります。

var $this = $(this); // cache this as a jQuery object

$this.nextAll('.drawer-arrow').show();
$this.nextAll('.drawerBottom').show();

...
于 2012-10-22T15:14:33.510 に答える
1

next all を使用して、両方のセレクターを組み合わせることができます。.next() は、現在の要素の直後にある要素のみを調べます。.nextAll は、セレクターに一致する現在の要素の後にあるすべての兄弟を検索します。

$(".clause").mouseenter(function() {    
    $(this).nextAll("div.drawer-arrow:first,div.drawerBottom:first").show();    
    $(".clause").css("border-bottom-right-radius", "0px")
                .css("border-bottom-left-radius", "0px");

}).mouseleave(function(){
    $(this).nextAll("div.drawer-arrow:first,div.drawerBottom:first").hide();    
    $(".clause").css("border-bottom-right-radius", "3px")
                .css("border-bottom-left-radius", "3px");     
});

http://jsfiddle.net/wirey00/5dBsq/

于 2012-10-22T15:19:18.423 に答える