JQuery Toggle无法正常工作 [英] JQuery Toggle not working as it should

问题描述

我在使用JQuery Toggle时遇到问题.

I have a problem with 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()函数进行了尝试，但是它给了我相同的结果.

I'm using the script to show and hide a DIV. However, toggle() doesn't seem to work at all and I don't know why. What happens is that it only shows the content, and never hides. I've also tried it with just the toggle() function but it gives me the same result.

我正在将Firefox 4与JQuery 1.5.2一起使用.

I'm using Firefox 4 with JQuery 1.5.2.

感谢您为解决此问题提供的帮助.

I'd appreciate any assistance to resolve this.

推荐答案

我似乎已经想到了这一点，但它使我望而却步.

I seem to have figured this one out, but it spooks the daylight out of me.

这是我要切换的DIV的HTML代码:

Here the HTML code for the DIV I wanted to toggle:

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

使用上面的代码，切换功能无效.

Using this code above, the toggle doesn't work.

但是当我取出fieldset标签时，切换起作用.对于我的一生，我无法解释为什么这行得通，但是上面的代码无法解释.

But when I take out the fieldset tags, the toggle works. For the life of me I can't explain why this is working, but not the code above.

我已禁用除jQuery脚本脚本标签之外的所有脚本标签，以及除要切换的脚本脚本标签以外的所有JavaScript代码，我仍然遇到相同的现象.

I've disabled all my script tags except the one for jQuery, and all my javascript code except the one to toggle and I still get the same phenomenon.

但是，在jsFiddle(http://jsfiddle.net/bBXhD/2/)中，我没有看到此问题.有没有人遇到过这样的事情?

However, in jsFiddle (http://jsfiddle.net/bBXhD/2/), I don't see the issue. Has anyone come across anything like this?

无论如何，谢谢大家的答复.

Anyway, thanks all for the responses.

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

Additional Note: 06-06-2011 15:41

以防万一以后有人遇到类似问题，我只是想记录一下我最近在此问题上的发现.问题出在CSS和HTML.尽管不是fieldset标签的问题，但由于我认为用此标签封装表单甚至在语义上都不准确，因此将其删除.

Just in case someone runs into a similar issue later, I just thought I'd document my recent finding on this. The problem was from the CSS and HTML. Although the fieldset tag was not the problem, it was removed as I believe it's not even semantically accurate to encapsulate a form with this tag.

问题出在容器div，即class ="sh-zone-button-link-menu-container".此容器在CSS中专门定位为绝对容器.此外，该表单在CSS中也被定位为绝对表单.发生这种情况时，JQuery toggle()将不起作用，我不确定为什么会这样.为了解决这个问题，我要做的是从CSS中移除form标记的位置声明.

The problem was from the container div i.e. class="sh-zone-button-link-menu-container". This container was specifically positioned as absolute in CSS. In addition, the form was also positioned as absolute in CSS. When this happens, JQuery toggle() will not work, I'm not sure why this is. What I did to resolve this was remove the position declaration from the CSS for the form tag.

您可以在JSFiddle上查看两个示例:

You can have a look at both examples on JSFiddle here:

a.无法使用JQuery切换( http://jsfiddle.net/bBXhD/4/)

a. Not working JQuery toggle (http://jsfiddle.net/bBXhD/4/)

b.有效的JQuery切换( http://jsfiddle.net/bBXhD/5/)

b. Working JQuery toggle (http://jsfiddle.net/bBXhD/5/)

干杯.

这篇关于JQuery Toggle无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！