的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背景图像展开/关闭

回答

相关问题