JQuery的切换不工作，因为它应该

Question

我有JQuery的切换问题。

我有以下代码：

var $_ = jQuery; 
$_(document).ready(function(){ 

$_("#sh-zone-buttons").delegate("#sh-zone-button-login-menu", "click", function(event) 
{ 
    event.stopPropagation(); 
    event.preventDefault(); 
    var elem_core = $_(this); 
    $_("#sh-zone-login-menu").toggle(0, function(){ 

     if($_(this).is(":visible")) 
     { 
      $_(this).hide(); 
      console.log("#sh-zone-login-menu: HIDE"); 
     } 
     else if(!($_(this).is(":visible"))) 
     { 
      $_(this).show(); 
      console.log("#sh-zone-login-menu: SHOW"); 
     }   

    }); 
    elem_core.toggleClass("current");  

}); 

}); 

我使用的脚本来显示和隐藏一个DIV。然而，切换（）似乎并没有工作，我不知道为什么。会发生什么是它只显示内容，并从不隐藏。我也试过只用toggle（）函数，但它给了我相同的结果。

我使用的是Firefox 4使用jQuery 1.5.2。

我会很感激的任何援助，以解决这个问题。

Answer 1

我似乎已经想通了这一个，但它间谍白天我了。

这里的DIV的HTML代码，我想切换：

<div id="sh-zone-login-menu" class="sh-zone-button-link-menu-container"> 
<fieldset> 
    <form action="#" method="post" enctype="multipart/form-data"> 
     <p> 
     <label for="email">Username or Email</label> 
     <input type="text" name="email" maxlength="255" value="" /> 
     </p> 
     <p> 
      <label for="email">Password</label> 
      <input type="password" name="password" maxlength="20" value="" /> 
     </p> 
     <p class="remember"> 
      <input type="submit" value="Sign in" /> 
      <input type="checkbox" name="remember" value="1" /> 
      <label for="remember">Remember me</label> 
     </p> 
     <p> 
      <a href="#">Forgot your password?</a> 
     </p> 
     </form> 
</fieldset> 
</div> 

使用上面这段代码，切换不起作用。

但是，当我拿出字段集标签，切换工作。对于我的生活，我无法解释为什么这是工作，但不是上面的代码。

我禁用了除jQuery之外的所有脚本标记，以及除了要切换的所有javascript代码外，我仍然得到相同的现象。

但是，在jsFiddle（http://jsfiddle.net/bBXhD/2/）中，我没有看到问题。有没有人遇到过这样的事情？

无论如何，谢谢所有的答复。

---

附加说明：2011年6月6日15:41

万一有人运行到类似的问题后，我想我要记录我最近的这一发现。问题来自CSS和HTML。尽管fieldset标签不是问题，但它被删除了，因为我认为用这个标签封装表单的语言不甚准确。

问题来自容器div，即class =“sh-zone-button-link-menu-container”。这个容器在CSS中被绝对定位。另外，表单也被定位为绝对的CSS。发生这种情况时，JQuery toggle（）将不起作用，我不确定这是为什么。我所做的解决这个问题的方法是从CSS中为表单标签移除位置声明。

你可以看看上的jsfiddle这里两个例子：

一个。不工作JQuery切换（）

b。工作JQuery切换（http://jsfiddle.net/bBXhD/5/）

干杯。

Answer 2

我想像的解决办法是增加一个.delegate()到这一点。

Answer 3

为什么您使用切换显示和隐藏起来

需要

只拨动

检查这个

http://api.jquery.com/toggle/

Answer 4

根据您目前的代码，你是隐藏#sh-zone-login-menu，然后在你的回调方法使其再次可见。
此外，var $_ = jQuery.noConflict();是jQuery的$分配给一个变量

var $_ = jQuery.noConflict(); 

$_(document).ready(function(){ 

    $_("#sh-zone-buttons").delegate("#sh-zone-button-login-menu", "click", function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 

    $_("#sh-zone-login-menu").toggle(); 
    $_(this).toggleClass("current"); 
    }); 
}); 

Answer 5

我它简化为首选方式：

var $_ = jQuery; 

$_(document).ready(function() { 

    $_("#sh-zone-buttons") 
     .delegate("#sh-zone-button-login-menu", "click", function(event) { 

     $_("#sh-zone-login-menu").toggle(); 
     $_(this).toggleClass("current");  
     return false; 

    }); 

}); 

你并不需要定义var elem_core如果你只打算使用一次，所以只需使用$_(this).toggleClass("current");

你并不需要所有的隐藏/显示一塌糊涂，只需使用toggle()，因为这是它做什么你。

你不需要event.stopPropagation()和event.preventDefault()，只需做return false，因为这两者都有。