的jQuery - 切換CSS背景圖像展開/關閉

我正在尋找一種方式來改變切換回地面圖像在這裏這個問題：的jQuery - 切換CSS背景圖像展開/關閉

我的問題是我有這樣的HTML：

<button id="close-menu"></button> 
<div id="menu-bar"> 
<div class="wrapper"> 
    <a href="http://www.website.com" target="_blank"> 
     <img src="image.png" alt=""> 
    </a> 
    <div class="options"> 
     <h2>eBlast Tools</h2> 
     <ul> 
      <li class="toggle-images">Images are <span>enabled</span>. Click to disable.</li> 
      <li class="download-zip"><a href="download.zip">Download ZIP File</a></li> 
     </ul> 
    </div> 
</div> 
</div>

，這是我當前的jquery：

$('#close-menu').click(function() { 
    $('#menu-bar').slideToggle(400); 
    return false; 
});

和THI s是CSS：

#close-menu { 
background: url(../img/minus-button.png); 
background-position: top left; 
width: 25px; 
height: 25px; 
position: absolute; 
top: 10px; 
right: 20px; 
z-index: 100; 
border: none; 
} 

#close-menu:hover { 
background: url(../img/minus-button.png); 
background-position: bottom left; 
}

來源

2012-12-07 tjoenz

您有什麼問題？ –

@HarshitTailor我有一個懸停狀態的加號圖像，當這個菜單打開時，我有一個負圖像和懸停狀態。我想弄清楚如何改變這個背景圖像，所以打開它將減號，並關閉它將是一個加號 – tjoenz

假設你想要的close-menu背景改變 - 嘗試這樣的事：

$('#close-menu').click(function() { 
    $('#menu-bar').slideToggle(400, function(){ 
     if($(this).is(':visible')){ 
      $('#close-menu').css('background-position','bottom left'); 
     } else { 
      $('#close-menu').css('background-position','top left'); 
     } 
    }); 

    return false; 
});

針對您的評論 - 你會過得更好創建一些像這樣的css：

.minus { background: url(../img/minus-button.png) top left no-repeat; } 
.minus:hover { background-position: bottom left; } 

.plus { background: url(../img/plus-button.png) top left no-repeat; } 
.plus:hover { background-position: bottom left; }

將c的minus到close-menu然後姑娘做：

$('#close-menu').click(function() { 
    $('#menu-bar').slideToggle(400, function(){ 
     $('#close-menu').toggleClass('minus'); 
     $('#close-menu').toggleClass('plus'); 
    }); 

    return false; 
});

來源

2012-12-07 16:48:54 boz

對不起，我有一個懸停狀態的加號圖像，當這個菜單打開時，我有一個減去圖像和懸停狀態。我想弄清楚如何改變這個背景圖像，所以打開它將被減去，並關閉它將是一個加號。 – tjoenz

@urbanrunic - 看我編輯 – boz

工作，非常感謝！我忘了toggleClass。 – tjoenz

試試這個，

if($('#divname:visible')) 
{ 
    $('#close-menu').css('background-image','img.jpg'); 
} 
else 
{ 
    $('#close-menu').css('background-image','img.jpg'); 
}

來源

2012-12-07 17:02:28

的jQuery - 切換CSS背景圖像展開/關閉

回答

相關問題