2

jQueryの.clickイベントを使用して、5divのclass="Hoofdstuk"の下部の境界線の色を変更しようとしています。あなたが次のリンクで見ることができるように：

casperjonker.site50.net

ご覧のとおり、機能していません。HTMLコードは次のとおりです。

<div class="Hoofdstuk" id="Introductie"></div>
<div class="Hoofdstuk" id="Content"></div>
<div class="Hoofdstuk" id="Interactie"></div>
<div class="Hoofdstuk" id="FrontEnd"></div>
<div class="Hoofdstuk" id="Projecten"></div>

これが私のjQueryコードです：

$('.Hoofdstuk').click(function () {
    $(this).animate({
        'width': '55em'
    }).siblings().animate({
        'width': '5em'
    }).css({
        'border-color': '#ffba00'
    }).siblings().css({
        'border-color': '#333'
    })
});

そしてここにCSSコードがあります：

.Hoofdstuk {
    width: 5em;
    height: 25em;
    float: left;
    border-width: 0.1em;
    overflow:hidden;
    border-bottom: #ffba00 solid 0.5em;
}

誰かがこれで問題を見ることができるならば、私に知らせてください。

お時間をいただきありがとうございます。

ヨンカー

4

3 に答える 3

3

最初の.animate（）で-次に進む前に.end（）を使用します。これは、原因である可能性のある元のセレクター（this）に戻るように指示します。それ以外の場合は、現在のセレクターとしてsiblings（）を使用します。

于 2013-02-04T21:18:32.430 に答える
3

.end()チェーンしてみてください

$('.Hoofdstuk').click(
    function(){
        $(this)
            .animate({'width': '55em'}).siblings().animate({'width':'5em'}).end()
            .css({'border-color':'#ffba00'}).siblings().css({'border-color':'#333'})

});

デモ

于 2013-02-04T21:18:47.220 に答える
0

あなたがいなくend()ても、代わりにそれらを整理して、次のようにすることができます：

$('.Hoofdstuk').click(function () {
    $(this)
    .animate({'width': '55em'})
    .css({'border-color': '#333'})
    .siblings().animate({'width': '5em'})
    .css({'border-color': '#ffba00'})
});

デモ-これが最初で、次に兄弟

于 2013-02-04T21:31:39.603 に答える