3

当我单击某个按钮时，我找到了打开/关闭 div 的代码。现在我不仅想让 div 打开/关闭，而且打开/关闭按钮从向下箭头变为向上箭头。

如果我的帖子不正确，因为这是我的第一篇帖子，这就是我到目前为止所要原谅的。

图像高度 = 60 像素，宽度 = 30 像素。向上箭头在一半，向下箭头在另一半。

<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 规则以.content_toggle.active按照您想要的方式调整图像

$("div.content_toggle").click(function () {
      $("div.content").slideToggle("slow");       
      $(this).toggleClass('active');
});
于 2012-06-16T22:14:56.520 回答
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>

请注意，我将背景位置的 y 轴更改了 30px

于 2012-06-16T22:15:12.493 回答
0

我会用.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>
于 2012-06-16T22:35:48.350 回答