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

当我点击某个按钮时，我发现打开/关闭div的代码。现在我还想让div不仅打开/关闭，而且打开/关闭按钮从向下箭头变为向上箭头。如何更改/替换slideToggle（）上图像的背景位置？

这是我迄今为止对不起，如果我的帖子不正确，因为这是我的第一篇文章。

图像是高= 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>

来源

2012-06-16 Anthony Russo

这是一个有用的帖子：http://stackoverflow.com/questions/1062731/jquery-toggle-to-change-image。而这个：http://stackoverflow.com/questions/4840635/jquery-button-click-change-image?rq=1 – Nick

安东尼 - 让大家站在你想要打你喜欢的答案和+1（向上箭头）宽松地只要你有足够的评价:)社区可以对那些不这样做的人有点恶毒。 – Nick

@尼克谢谢你的信息。 –

使用类改变背景位置的y轴的“向上箭头”，另一个是“向下箭头”，然后将它们之间进行切换，你切换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-16 22:16:53 pete

我认为这些图像不在两个独立的图像文件中。在这种情况下，将图像定位在每个课堂上可能会更好。类似于'galchen'提到的。 – Nope

是的，它看起来图像在一个文件中，虽然它可能是可取的，并且使用两个图像肯定更标准:) – Nick

然后适当地定义“向上箭头”和“向下箭头”类（即，相同的图像，但不同的定位）。原理是一样的。 – pete

在点击处理程序中将简单地切换一个名为“active”的类。你需要写一个CSS规则为.content_toggle.active，调整图像，你所希望的方式

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

来源

2012-06-16 22:14:56 charlietfl

因为两个箭头是相同的图像中，你将要设置的CSS背景位置属性：

<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>

注意到，我由30像素

来源

2012-06-16 22:15:12 galchen

更好的办法是通过引用一个CSS类来调整背景位置，而不是像这样做。 –

@MoinZaman我同意 – galchen

是否有这个例子在IE中不起作用的原因？ –

我会这样做.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-16 22:35:48

我同意使用CSS类的背景位置，但我试过这个，它不工作。我可能会错过一些明显的东西。 galchen的示范正在为我工作。 –

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

回答

相关问题