jquery - 尝试使用 jQuery .click 事件更改边框颜色

Question

我正在尝试使用来自 jQuery 的 .click 事件来更改 5 div 的 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;
}

如果有人能看到这个问题，请告诉我。

我感谢你的时间。

扬克

Answer 1

On your first .animate() - use .end() before moving on. This tells it to go back to the original selector (this), which could be the culprit. Otherwise, it will use siblings() as the current selector.

Answer 2

Try to .end() the chain

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

});

DEMO

Answer 3

没有end()你可以作为替代保持它们的顺序并这样做：

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

---

演示- 先是兄弟姐妹

---