Question

如何更改图像按钮，导致div折叠/展开。

例如，单击“+”将展开。在扩展时，“+”变为“ - ”。再一次，单击“ - ”将折叠div，并且“+”将再次出现。

以下是fiddle

HTML：

  <div class="expandContent"><a><img id="arrow" src="http://s13.postimg.org/myy6y2uxv/plus.png"></a></div>

<div class="showMe" style="display:none">This content was hidden, but now shows up </div>

JS：

 $('.expandContent').click(function(){
    $('.showMe').slideToggle('slow');
});

Answer 1

fiddle Demo

var div_show = $('.showMe'), //cache selectors
    arrow = $('#arrow');
$('.expandContent').click(function () {
    div_show.slideToggle('slow', function () { //slideToggle callback function -> when slideToggle  finishes.
        if ($(this).is(':visible')) { //if div is visible change image to minus 
            arrow.prop('src', 'http://www.a1registry.ca/en/images/minus.png');
        } else { // if div hidden change image to plus
            arrow.prop('src', 'http://s13.postimg.org/myy6y2uxv/plus.png');
        }
    });
});

<小时/> 参考

Answer 2

试试这个小提琴：

http://jsfiddle.net/zd57W/2/

    $("#one,#two").on("click", function(){
        $("#one,#two").slideToggle();
        $('.showMe').slideToggle('slow');
    });

Answer 3

尝试：

$('.expandContent').click(function () {
     $('.showMe').slideToggle('slow');
     $('#arrow').toggleClass('plus minus');
 });

CSS：

#arrow{display:block;height:9px;width:9px;}
.plus{background:url(http://s13.postimg.org/myy6y2uxv/plus.png);}
.minus{background:url(http://s13.postimg.org/myy6y2uxv/plus.png);}

Fiddle here.

Answer 4

HERE是一个小提琴。

HTML

<div id='clickme'>+</div>
<div id='imagediv' class='imagediv'></div>

CSS

#clickme {
  width: 50px;
  margin: 10px auto 10px auto;
  background-color: blue;
  color: white;
  font-size: 48px;
  text-align: center;
}
.imagediv {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    background-color: red;
    border-radius: 10px;
}

JS

globalsize = 1;
$('#clickme').click(function(){
  if (globalsize == 1)
    {
     $('#imagediv').css( 'width', '200px' );
     $('#clickme').text( '-' );
     globalsize = 2;
     } else {
     $('#imagediv').css( 'width', '100px' );
     $('#clickme').text( '+' );         
     globalsize = 1;
  }
});

Answer 5

你可以使用jQuery UI及其附带的按钮（参见jsFiddle http://jsfiddle.net/zd57W/5/）

<div class="expandContent ui-icon ui-icon-zoomin"></div>
<div class="showMe" style="display:none">This content was hidden, but now shows up</div>


$('.expandContent').click(function(){
        $('.showMe').slideToggle('slow');
         $(this).toggleClass('ui-icon-zoomin ui-icon-zoomout')
    });

此致亨德里克

如何更改图像按钮，导致折叠/展开div

5 个答案: