Question

这是我想要做的：

我想制作一个带有标题的网页，在它们下面放一个小的“+”图像，然后点击包含与标题链接的细节的div。此外，我希望它将“+”图像切换为“ - ”新图像，然后如果我的用户点击这个新图片，则会发生相反的效果，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

你只需向下滑动DIV ..

看这个演示：

http://jsfiddle.net/JLy3t/

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

1 个答案: