Question

我正在尝试执行典型的展开和折叠功能，以便在图像点击时显示/隐藏div。

这是我的HTML：

<div id="result_location">
    <h3>Heading Text here</h3>       
</div>
<div class="result_menu"></div>

我的JavaScript：

$('#result_location').click(function() { 
    $('.result_menu').slideToggle("slow");
});

因此#result_location div中会有一个图像，当.result_menu被切换时，它会在正负之间交替显示。

希望有点意义！

Answer 1

假设我读得正确，您的“触发器”为.result_menu。这是一个JSFiddle，它完成了我认为你正在寻找的东西：http://jsfiddle.net/trevanhetzel/P4N2c/

基本上，我们使用.on("click")绑定到触发器元素，然后找到要切换的图像和.slideToggle它。非常直截了当。

$(function () {
    $(".result_menu").on("click", function () {
       $("#result_location img").slideToggle(); 
    });
});

您还需要display: none CSS中的图片。

我错过了关于你期望的结果的任何事情吗？

Answer 2

为你写了一个小提琴。基本上切换源代码就可以了。

这是代码

HTML

<div class="msg_list">
    <p class="result_location">Heading Text here<img src="http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif"></img></p>
        <div class="result_menu">
            This <br/>
            is <br/>
            a <br/>
            Testing <br/>
            Content
        </div>
</div>

的javascript

$(".result_location").click(function(){
    $(this).next(".result_menu").slideToggle("slow");
})
.toggle( function() {
    $(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}, function() {
    $(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});

检查小提琴here

Answer 3

您可以在#result_location上切换一个类，然后将箭头图像添加为该选择器的CSS背景图像。再次单击时，将删除该类，从而删除/更改图像。

单击时切换图像源

3 个答案: