jquery / Jquery UI :显示div并更改图像，然后执行相反的操作

Question

这是我想要做的：

我想做一个网页的标题，在他们下面放一个小"+“图像，这将在点击包装一个包含与标题链接的细节的div。另外，我希望它将onclick上的"+“图像切换为"-”新图像，然后如果我的用户单击此新图片，则会发生相反的效果，div消失包装，图像切换回"+“图片。

因此，基本上我使用Jquery/JqueryUI来使用hide()和show()函数，并使用Blind效果来获得想要的效果。

这是我的代码，但是，它只是包装了div，那么相反的效果就不起作用了。有什么解决方案吗？

 jQuery(document).ready(function()
{
    $(".expla").hide();
    $(".grinder img").bind('click',function () {
        if($('.grinder').hasClass('plus'))
        {
            $('.grinder img').replaceWith('<img src="image/minus.png" />');
            $('.expla.egrinder').show("blind", 5000);   
            $('.grinder').removeClass('plus');


        }
        else    
        {
            $('.grinder img').replaceWith('<img src="image/add.png" />');
            $('.expla.egrinder').hide("blind", 5000);
            $('.grinder').addClass('plus');
        }
    });
})

下面是我的HTML代码：

 <div id="grinder">
                <div class="title grinder plus"><p>Grinder<br /><img src="image/add.png" /></p></div>
                <div class="expla egrinder"><img src="image/grinder.png" /></div>
            </div>
            <div id="flyer">
                <div class="title flyer plus"><p>Flyer<br /><img src="image/add.png" /></p></div>
                <div class="expla eflyer"><img src="image/flyer.png" /></div>
            </div>
            <div id="whack">
                <div class="title whack plus"><p>WHack<br /><img src="image/add.png" /></p></div>
                <div class="expla ewhack"><img src="image/whack.png" /></div>

            </div>

好吧，我还不能回答我自己的问题，但这是我得到的解决方案，感谢Paresh Balar：

jQuery(document).ready(function()
{
    $(".expla").hide();


    $(".grinder img").click(function () {
        if($('.grinder').hasClass('plus'))
        {
            $('.grinder img').attr({src: "image/minus.png" });
            $('.expla.egrinder').show("blind", 5000);   
            $('.grinder').removeClass('plus');


        }
        else    
        {
            $('.grinder img').attr({src: "image/add.png" });

            $('.expla.egrinder').hide("blind", 5000);
            $('.grinder').addClass('plus');


        }
    });
})

Answer 1

你只需要往下滑然后往上滑..

请参阅此演示：

http://jsfiddle.net/JLy3t/