Question

我是网页设计的新手。我有这个示例代码，当我们点击窗口的任何地方时，它会切换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>

如何添加图像并更改图像以进行显示和隐藏？我有'＆gt;'图标。当我点击它时，div应该出现并且'＆gt;'应该改为'＆lt;'

Answer 1

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

添加一个具有此唯一ID的按钮

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

Answer 2

我认为你可以按照以下方式进行操作

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

注意：在这种情况下，事件委派不是必需的，但我认为重要的是你要了解part以便更进一步使用。

Answer 3

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

如果您有一个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");
    });
})

演示：Fiddle

Answer 4

按id： -

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

Answer 5

试试这个

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

Answer 6

Demo

试用此代码

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

切换onClick jquery

6 个答案: