Question

我有以下代码。

<!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应该出现。我怎样才能做到这一点？

Answer 1

您可以使用纯{css执行此操作 - 使用checkbox hack（有关详细信息，请查看此css-tricks article）

<强> FIDDLE

标记

<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;
}

Answer 2

尝试使用此

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);
});
   });
  });

左侧菜单切换图像

2 个答案:

标记

CSS