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，因爲這兩者都有。