jQuery - slideToggle 选择和取消选择按钮答案

【问题标题】：jQuery - slideToggle to select and deselect buttonjQuery - slideToggle 选择和取消选择按钮
【发布时间】：2013-07-01 23:04:54
【问题描述】：

我在这里有一个 jsfiddle - http://jsfiddle.net/eYV4n/

非常简单的导航和隐藏在其下方的 div 块。

当您单击导航中的第二个链接时，div 块会使用 slideToggle 向下滑动。

当 div 块向下滑动时，我希望单击的按钮被选中。

当它被点击时我可以通过改变背景颜色来做到这一点。

当div块再次滑动时，是否可以取消选择链接（将其颜色更改回来）。

jquery.hover() 处理程序悬停和悬停。是否可以使用 slideToggle 做同样的事情。

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <title>Title of the document</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        body{
          background:#eee;
        }
        #wrap{
          background:#fff;
          max-width:800px;
          margin:0 auto;
          height:1000px;
        }
        ul{
          list-style:none;
          overflow:auto;
        }
        ul li{
          display:inline;
        }
        ul li a {
          float:left;
          display:block;
          color:#222;
          padding:10px;
          margin:0 5px 0 0;
        }
        #block{
          width:100%;
          margin:0 auto;
          height:200px;
          background:red;
          display:none;
        }
      </style>

      </head>

    <body>
      <div id="wrap">
        <nav>
          <ul>
            <li><a href="">One</a></li>
            <li><a href="" id="btn">Two &darr;</a></li>
            <li><a href="">Three</a></li>
            <li><a href="">Four</a></li>
          </ul>
        </nav>  

      <div id="block">

      </div>

      </div><!-- #wrap -->


      <script>

        $('#btn').click(function(e){
          e.preventDefault();
          $('#block').slideToggle('2000')
            $('#btn').css('background','red');
        })


      </script>
    </body>

    </html>

【问题讨论】：

标签： slidetoggle

【解决方案1】：

更好的解决方案是切换一个依次改变背景的类。您应该将永远不要使用 Javascript 设置元素样式作为最佳实践，您应该为此使用 CSS。添加/删除类虽然很好。从长远来看，这将使代码更容易维护，并且由于您使用的是类而不是内联样式，因此它也更具语义。

试试这个：

    $('#btn').click(function(e){
      e.preventDefault();
      $('#block').slideToggle('2000')
        $('#btn').toggleClass('active');
    })

然后在你的 CSS 中。

.active { background: red; }

编辑： Jsfiddle here.

【讨论】：