Question

如何在jquery中编写自己的切换功能。

    <head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script>
            $(function(){
                $('#dv').bind('click',function(){
                    $("#toTgl:hidden").show();
                });
                $('#dv').trigger('click');
            });
        </script>
    </head>
    <body>
        <div id='dv' onclick="$('#toTgl').hide()"><center>Toggle</center></div>
        <br/>
        <div id='toTgl'><center>Change This</center></div>
    </body>

两者（显示和隐藏）都被触发，我

Answer 1

为什么不使用内置jQuery toggle function？

Answer 2

这是我带来的并且工作正常。

    <div id='dv' onclick="alert('test')">Toggle</div>
    <br/>
    <div id='toTgl'>Change This</div>
    <script>
    function toggle(){
        $('#toTgl')[$('#toTgl').is(':hidden')?'show':'hide']();
    }
    function toggleClick(ele){
        $(ele).removeAttr('onclick');
        $(ele).bind('click', function(ev){
            toggle();
        });
    }
    function z(id){ return document.getElementById(id);}
    toggleClick(z('dv'));
    </script>

Answer 3

您添加了两个冲突的点击事件。使用显示和隐藏元素的单个事件处理程序。（并且不要使用已弃用的center标记。）

<head>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $('#dv').click(function(){
        $("#toTgl").toggle();
      });
    });
  </script>
  <style type="text/css">
  #dv { text-align: center; }
  #toTgl { text-align: center; }
  </style>
</head>
<body>
  <div id="dv">Toggle</div>
  <br/>
  <div id="toTgl">Change This</div>
</body>

使用jquery show和hide编写切换功能

3 个答案: