Question

我遇到了JQuery Toggle的问题。

我有以下代码：

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（）似乎根本不起作用，我不知道为什么。会发生什么，它只显示内容，永远不会隐藏。我也尝试过只使用toggle（）函数，但它给了我相同的结果。

我正在使用Firefox 4和JQuery 1.5.2。

我很感激您解决此问题。

Answer 1

使用您当前的代码隐藏#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 2

我把它简化为：

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，因为这样做。{/ p>

Answer 3

我似乎已经把这个想出来了，但是这让我感到害怕。

这里是我要切换的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>

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

但是当我取出fieldset标签时，切换工作。对于我的生活，我无法解释为什么这是有效的，而不是上面的代码。

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

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

无论如何，感谢大家的回复。

附加说明：06-06-2011 15:41

如果以后有人遇到类似的问题，我只是想我会记录我最近的发现。问题来自CSS和HTML。尽管fieldset标记不是问题，但它已被删除，因为我认为使用此标记封装表单在语义上甚至不准确。

问题来自容器div，即class =“sh-zone-button-link-menu-container”。这个容器在CSS中被特别定位为绝对容器。此外，表单在CSS中也被定位为绝对。当发生这种情况时，JQuery toggle（）将无法工作，我不知道为什么会这样。我解决这个问题的方法是从CSS中删除表单标记的位置声明。

您可以在这里查看JSFiddle上的两个示例：

一个。不工作JQuery切换（http://jsfiddle.net/bBXhD/4/）

湾使用JQuery切换（http://jsfiddle.net/bBXhD/5/）

干杯。

Answer 4

我认为解决方案是添加.delegate()。

Answer 5

为什么要使用切换隐藏和显示

只需切换

检查这个

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

JQuery Toggle不能正常工作

5 个答案: