Question

当我点击某个按钮时，我找到了打开/关闭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>

Answer 1

使用“向上箭头”的类和“箭头向下”的另一个类，然后在切换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>

Answer 2

在点击处理程序中，只需切换名为“active”的类。您需要为.content_toggle.active编写一个css规则，以便按照您想要的方式调整图像

$("div.content_toggle").click(function () {
      $("div.content").slideToggle("slow");       
      $(this).toggleClass('active');
});

Answer 3

由于两个箭头都在同一图像中，因此您需要设置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>

注意我正在将背景位置的y轴改变30px

Answer 4

我会用.toggle()来做。你有更多的控制权，代码更具可读性，即看看会发生什么。

绝对可以使用一个或两个类来打开/关闭状态。

请参阅此处的示例：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>

如何在slideToggle（）上更改/替换图像的背景位置？

4 个答案: