jQuery切换时不应该

Question

所以我得到了这么远，我已经解决了我遇到的问题，但我仍然想知道为什么会这样。

首先，这是我的原始代码：

$(function(){
    var navListLength = $('nav ul li').length;

    buttonPress(1);
    function buttonPress(i){

        if(i < navListLength){

            $('nav ul li a:nth-child(' + i + ')').click(function(){
                $(this).toggleClass('button-pressed');

                console.log('Button Down');

                setTimeout(function(){
                    $('nav ul li a:nth-child(' + i + ')').toggleClass('button-pressed');

                    buttonPress(i + 1);
                    console.log('Button Up');

                }, 500);
            });
        }
    }
});

它应该在单击链接时切换导航列表中单个链接的样式，而不会影响列表中的任何其他链接。

我想这样做，这样我以后就可以在这个列表中添加任意数量的链接，而无需每次创建新的类并将其添加到jQuery中。

第一个切换按预期工作。但是第二个切换应用于所有链接，它会产生反转效果。因此，除了点击链接之外，所有链接都与它们应该是相反的。

我通过将第一个toggleClass更改为addClass并将第二个toggleClass更改为removeClass来解决了这个问题。但我不应该这样做。

有谁可以告诉我为什么会这样？

这是我的按钮图片：

Answer 1

你只是为了在点击时切换课程而做太多工作。你不需要制作所有导航项的数组，jQuery的全部意义在于它为你处理选择DOM元素。

试试这个：

$(function() {

  $('nav ul li').click(function() {
    $(this).toggleClass('button-pressed');
  });

});

您不必处理以确保其他人不受影响。只有被点击的元素才会被切换。

- 编辑 -

我现在用setTimeout()了解你的目标。您可以在单击处理程序中执行此操作，如下所示：

  $('nav ul li').click(function() {
    // store the selection in a variable
    var $this = $(this);
    $this.toggleClass('button-pressed');
    window.setTimeout(function() {
      $this.toggleClass('button-pressed');
    }, 500);
  });

FIDDLE

Answer 2

为什么现在在纯CSS中如下：

<强> LIVE DEMO

 <span class="button" tabindex="1"> 
   <span>Home</span>
 </span>

span.button{
  display:inline-block;
  border-radius:9px;
  background:#ddd;
  padding:6px;
  vertical-align:middle;
  outline:none;
}
span.button > span{
  background:#F06BAE;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  display:inline-block;
  padding:10px 25px;
  border-radius: 6px;
  border-bottom:4px solid #CB4589;
  transition: border 0.3s;
}
span.button:focus > span{
  border-top: 4px solid #FCA9D2;
  border-bottom-width:0;
}