使用jquery显示和隐藏编写切换功能答案

【问题标题】：writing toggle function using jquery show and hide使用jquery显示和隐藏编写切换功能
【发布时间】：2011-05-22 02:11:14
【问题描述】：

如何在 jquery 中编写我自己的切换函数。

$(函数(){ $('#dv').bind('click',function(){ $("#toTgl:hidden").show(); }); $('#dv').trigger('click'); }); 脚本>
Toggle

改变这个
正文>

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

【问题讨论】：

标签： jquery toggle

【解决方案1】：

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

【讨论】：

我也想在 div elem 上有一个 onclick 事件。那怎么办？？
你似乎做对了：$('#dv').bind('click',function(){ // do whatever you like });

【解决方案2】：

您添加了两个冲突的点击事件。使用显示和隐藏元素的单个事件处理程序。（并且不要使用已弃用的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>

【讨论】：

但我不想使用这种切换方法。我想自己写而不使用“if”条件。
@Artha：我真的不明白这一点，但你可以通过使用选择器作为条件来避免使用if：var x = $('#toTgl:hidden');var y = $('#toTgl').not(x);x.show();y.hide();
我也想在 div elem 上有一个 onclick 事件。那怎么办？？

【解决方案3】：

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

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

【讨论】：