3

特定のボタンをクリックするとdivを開閉するコードを見つけました。ここで、div の開閉だけでなく、開閉ボタンも下向き矢印から上向き矢印に変更したいと考えています。

これが私の最初の投稿であるため、私の投稿が正しくない場合はご容赦ください。

画像は高さ=60px、幅=30pxです。上向きの矢印は一方の半分にあり、下向きの矢印は他方の半分にあります。

<style>
.content_toggle {
background: url(toggle-btn.png);
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
cursor: pointer;
bottom: 62px;
left: 850px;
height: 30px;
width: 30px;
}
</style>


<body>
<div class="content_toggle" style="display: block;"></div>

<script>
$("div.content_toggle").click(function () {
  $("div.content").slideToggle("slow");
});
</script>

<div class="content">content, content, content</div>
</body>
4

4 に答える 4

4

「上向き矢印」用のクラスと「下向き矢印」用の別のクラスを使用し、div の可視性を切り替えるときにそれらを切り替えます。

<style>
    .content_toggle {
        background-color: rgba(0, 0, 0, 0.9);
        position: absolute;
        cursor: pointer;
        bottom: 62px;
        left: 850px;
        height: 30px;
        width: 30px;
    }
    .arrow-up {
        background: url(toggle-btn.png);
        background-position: 0 0;
    }
    .arrow-down {
        background: url(toggle-btn.png);
        background-position: 0 -30;
    }
</style>
<body>
    <div class="content_toggle arrow-up" style="display: block;"></div>
    <script>
        $(document).ready(function () {
            $("div.content_toggle").click(function() {
                var self = $(this); //cache jQuery object
                $("div.content").slideToggle("slow");
                if (self.hasClass("arrow-up")) {
                    self.removeClass("arrow-up").addClass("arrow-down");
                } else {
                    self.removeClass("arrow-down").addClass("arrow-up");
                }
            });
        });
    </script>
    <div class="content">content, content, content</div>
</body>
于 2012-06-16T22:16:53.973 に答える
0

両方の矢印が同じ画像にあるため、css の background-position 属性を設定する必要があります。

<script type="text/javascript">
$(function(){

    $("div.content_toggle").data('bgp',0).click(function () {
        $("div.content").slideToggle("slow");
        $(this).data('bgp', 30 - $(this).data('bgp'));  // toggle the stored value
        $(this).css('background-position', '0 '+$(this).data('bgp')+'px'); // set the scss
    });
});
</script>

background-position の y 軸を 30px 変更していることに注意してください

于 2012-06-16T22:15:12.493 に答える
0

クリック ハンドラーでは、単に「アクティブ」という名前のクラスを切り替えます。必要に応じ.content_toggle.activeて画像を調整するための css ルールを作成する必要があります。

$("div.content_toggle").click(function () {
      $("div.content").slideToggle("slow");       
      $(this).toggleClass('active');
});
于 2012-06-16T22:14:56.520 に答える
0

でやります.toggle()。制御が容易になり、コードが読みやすくなります。つまり、いつ何が起こるかを確認できます。

そして、必ず開閉状態に 1 つまたは 2 つのクラスを使用してください。

ここで例を参照してください: http://jsbin.com/anebug/edit#html,live

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .content_toggle {
    background: url(toggle-btn.png);
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    cursor: pointer;
    bottom: 62px;
    left: 850px;
    height: 30px;
    width: 30px;
  }
  .content { background-image:url(arrow.png); }
  .closed { background-position:0 -30px; } 
  .open { background-position:0 0; }
</style>
</head>


<body>
<div class="content_toggle" style="display: block;"></div>

<div class="content">content, content, content</div>


<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
<script>
  $("div.content_toggle").toggle(
      function() { $('.content').slideDown('slow',
                                  function(){$(this).removeClass('open')});}, 
      function() { $('.content').slideUp('slow',
                                  function(){$(this).addClass('closed')});
  });
</script>

  </body>
</html>
于 2012-06-16T22:35:48.350 に答える