0

私はここにjsfiddleを持っています - http://jsfiddle.net/eYV4n/

非常にシンプルなナビゲーションと、その下に隠された div ブロック。

ナビゲーションの 2 番目のリンクをクリックすると、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>
4

1 に答える 1

1

より良い解決策は、クラスを切り替えて背景を変更することです。JavaScript を使用して要素のスタイルを設定しないことをベスト プラクティスにする必要があります。そのためには CSS を使用する必要があります。ただし、クラスの追加/削除は問題ありません。これにより、長期的にはコードの保守がはるかに簡単になります。また、インライン スタイリングではなくクラスを使用しているため、よりセマンティックになります。

これを試して：

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

次に、CSS で。

.active { background: red; }

編集: Jsfiddle here .

于 2013-07-01T14:58:17.013 に答える