如何更改/替換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（）上圖像的背景位置？

回答

相關問題