jquery - jQuery-CSS背景画像の展開/クローズを切り替えます

Question

私はここでこの質問のようにトグルで背景画像を変更する方法を探しています：

jQuery-画像の展開/閉じるを切り替えます

私の問題は私がこの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;
});

そしてこれは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;
}

Answer 1

背景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; }

minustoのクラスを追加してから、次のclose-menuようにします。

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

    return false;
});

Answer 2

これを試して、

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