Question

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

真正简单的导航和它下面的隐藏div块。

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

当div块向下滑动时，我希望单击该按钮进行选择。

我可以通过更改背景颜色来点击它。

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

jquery.hover（）处理程序hover-in和hover-out。是否可以使用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>

Answer 1

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

试试这个：

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

然后在你的CSS中。

.active { background: red; }

编辑： Jsfiddle here。

jQuery - slideToggle选择并取消选择按钮

1 个答案: