-1

我有以下代码。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
      <title>slide demo</title>
         <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
      <style>
        #toggle {
          width: 100px;
          height: 100px;
          background: #ccc;
        }
       </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
 <button id="mybutton">Show/Hide Left Slide Menu</button>
 <div id="toggle"></div>

   <script>
    $('#mybutton').click(function () {
        $("#toggle").toggle("slide");
    });
</script>

   </body>
 </html>

我想显示一个图像（image1）。当用户点击 image1 时，div 应该会出现，image1 应该隐藏，image2 应该出现。当用户点击 image2 时，div 应该隐藏，image2 应该隐藏，image1 应该出现。我怎样才能做到这一点？

4

2 回答 2

1

您可以使用纯 css 来做到这一点 - 使用checkbox hack（有关更多信息，请查看这篇css-tricks 文章）

小提琴

标记

<input type="checkbox" id="toggle-1">
<label for="toggle-1"></label>

CSS

input[type=checkbox] {
   display:none;
}

/* Default State */
label
{
   display: block;
   width: 400px;
   height: 100px;
   background: url(http://placehold.it/400x100) no-repeat;
}

/* Toggled State */
input[type=checkbox]:checked + label {
   width: 350px;
   height: 150px;
   background: url(http://placehold.it/350x150) no-repeat;
}
于 2013-08-30T14:02:25.013 回答
1

尝试使用这个

http://jsfiddle.net/AmqcY/

$(document).ready(function(){
$(document).on('click','#imageid',function(){

var $this= $(this);
$('#toggle').toggle('slide',function(){
  //swap src of the image on toggle is completed
  var imgsrc = $this.attr('src');
  $this.attr('src',$this.data('othersource'));
  $this.data('othersource',imgsrc);
});
   });
  });
于 2013-08-30T17:20:17.167 回答