Question

我正在扩展和崩溃div。一切都很好。但是当div扩展和崩溃时我需要改变图像。 JSFiddle

    <div class="row" id="divExpand_DRILLING">
        <div class="col-md-9">
            <span class="section_detail"><img src="/Content/Images/spe_plus.png" 
              style="display:inline;margin:2px 5px 2px 0px;" id="img_DRILLING">
              Drilling</span>
        </div>
    </div>

    <div class="row hiddencontent" style="display: block;">
        <div class="col-md-9">
            <div class="row outer-part col-md-offset-1">
            </div>
        </div>
    </div>

<script type="text/javascript">
$(function() {
    $("div[id^='divExpand']").click(function () {

        var $header = $(this);
        //getting the next element
        var $content = $header.next();
        //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
        $content.slideToggle(500, function () {

        });

    });
})

Answer 1

不习惯img tag使用css背景图片。

使用类定义范围，并根据您的设计应用css ，并在jquery中编写一些代码

示例如下。

$(function() {
    $("div[id^='divExpand']").click(function () {
        
        
        var $header = $(this);
        //getting the next element
        var $content = $header.next();
        //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
        $content.slideToggle(500, function () {
                 $header.find('.plus-icon').toggleClass('mines-icon') ;         
        });

    });
})

.hiddencontent {
    display: none;
    padding : 5px;
}
.plus-icon{
    background:url("http://i.stack.imgur.com/8htrq.png") no-repeat 0 0;
    display:inline-block;margin:2px 5px 2px 0px;
    width:16px;
    height:16px;
}


.mines-icon.plus-icon{
    background:url("http://i.stack.imgur.com/H8o5r.png") no-repeat 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="row" id="divExpand_DRILLING">
            <div class="col-md-9">
                <span class="section_detail"><span class="plus-icon"></span>
                  Drilling</span>
            </div>
        </div>

        <div class="row hiddencontent">
            <div class="col-md-9">
                <div class="row outer-part col-md-offset-1">
                    Sample text
                </div>
            </div>
        </div>
    <!-- use this image for expand http://i.stack.imgur.com/H8o5r.png-->
       <!-- use this image for collapse http://i.stack.imgur.com/8htrq.png-->

如果你想创建一个Accordion而不是简单的代码是 here

Answer 2

请尝试以下代码：

DEMO

$(function() {
        $("div[id^='divExpand']").click(function () {

            var $header = $(this);
            //getting the next element
            var $content = $header.next();
            //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
            $content.slideToggle(500, function () {
                if($("#img_DRILLING").is(":visible")){
                    $("#img_DRILLING").hide();
                    $("#img_DRILLING1").show();
                }
                else{
                    $("#img_DRILLING1").hide();
                    $("#img_DRILLING").show();
                }

            });

        });
    })

如何在展开/折叠时使用父div更改图片网址？

2 个答案: