3

我是网页设计的新手。我有这个示例代码，当我们单击窗口上的任意位置时，它会切换一个 div。

<!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>

       <p>Click anywhere to toggle the box.</p>
       <div id="toggle"></div>

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

    </body>
</html>

如何添加图像并更改图像以进行显示和隐藏？我有一个“>”图标。当我单击它时，应该出现 div 并且 '>' 应该更改为 '<'

4

6 回答 6

2 
$('#buttonid').on('click', function () {
    $('#toggle').toggle('slide');
});

像这样添加一个具有唯一 ID 的按钮

<button id="buttonid">click to toggle </button>
于 2013-08-30T12:40:01.607 回答
1

我认为你可以这样做

<img src='source:<'  id='imageid' data-othersource='source:>' />

您可以使用两个源声明这样的图像，然后在 jQuery 中切换 src。

//wait for the document to be fully loaded to execute
$(document).ready(function(){
  //use event delegation
  $(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)

   });
  });
});

这样，如果由于某些原因，您必须更改图像，则无需返回脚本，只需更改 html。

http://jsfiddle.net/AmqcY/

注意：在这种情况下，事件委托不是必需的，但我仍然认为阅读该部分以供进一步使用很重要。

于 2013-08-30T12:50:58.443 回答
0

演示

试试这个代码

$('body').on('click',function(){
        $('#toggle').toggle('slide');        
    });
于 2013-08-30T12:47:08.363 回答
0

而不是将点击处理程序注册到文档，将其注册到按钮

如果你有一个带有 id 的按钮，mybutton那么

//dom ready handler so that the script is executed after the dom is loaded
jQuery(function(){
    //register the click handler to an element with id mybutton
    $('#mybutton').click(function () {
        $("#toggle").toggle("slide");
    });
})

演示：小提琴

于 2013-08-30T12:40:13.140 回答
0

按编号：-

  <button id="button_id">click to toggle </button>

   $('#button_id').click(function() {
        $( "#toggle" ).toggle( "slide" );
     });

按班级：-

  <button class="button_class">click to toggle </button>

     $('.button_class').click(function() {
            $( "#toggle" ).toggle( "slide" );
         });
于 2013-08-30T12:41:07.497 回答
0

像这样试试

$('#yourbuttonId').click(function () {
    $("#toggle").toggle("slide");
});
于 2013-08-30T12:41:49.470 回答