如何停止 jQuery SlideToggle 溜溜球？

Question

我是 jQuery 的新手，但这似乎应该工作得很好：

$(document).ready(
    function()
    {
        $("#btn_toggle_transcript").click(
            function()
            {
                $("#transcript_container").slideToggle(1000);
            }       
        );
    }
);

...它确实工作，但不正确。 ...至少，不像预期的那样...

我是否正确假设上述代码将向 ID 为“btn_toggle_transcript”的元素添加单击处理程序？那么，这个点击处理程序将通过打开目标 div（...id 为“transcript_container”）（如果它已关闭）或关闭它（如果它已打开）来响应点击？

当前发生的情况是这样的：单击按钮确实会打开 div 幻灯片。但是，当它完全打开时，它会立即（无需用户输入）再次滑动关闭。

我看到一些论坛帖子表明可能的原因是处理程序被添加了两次。但是，如果我注释掉上面的代码，则单击按钮时不会执行任何操作。所以，处理程序不会添加到其他任何地方...

任何人都可以告诉我为什么我的 div 会自行关闭吗？

按钮的 HTML：

<div id="tools_button_container">
    <div class="tools_button" id="btn_toggle_transcript"></div>
</div>

滑动 div 的 HTML（内容动态设置）：

<div id="transcript_container">
    <div id="transcript_contents"></div>
</div>

和 CSS：

#transcript_container{
z-index:4;
position:absolute;
width:290px;
max-height:455px;
top:51px;
right:-2px;
background-color:#90B2D8;
padding:20px 10px 10px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
display:none;
}

#transcript_contents{
max-height:375px;
overflow:auto;
margin:20px 0px 10px 0px;
background-color:#ffffff;
padding:0px 5px 0px 5px;
}

#btn_toggle_transcript {
background: url('images/transcript.png') no-repeat 0 0;
display:block;
}

#circle_btn_toggle_transcript:hover {
background-position: 0px -50px;
}

==========

编辑：

我做了三件事似乎有帮助。我不知道他们为什么有效，但他们确实有效。

1) Drupal 6.x 使用旧版本的 jQuery (1.2.2)。有一个模块要更新到 1.3.2。我用 1.7.1 文件替换了 1.3.2 更新文件，现在我的 DOM 报告使用 jQuery v1.7.1。

2）& 3）尽管事实上我只绑定到单击事件一次（通过删除绑定并且在按钮单击时没有调用任何操作来验证），但我决定尝试添加一行来删除我的“幻像”绑定，然后再添加实际的绑定绑定。根据我的阅读，我决定使用现在推荐的 on() 和 off() 方法来添加/删除绑定。我的 read() 函数现在看起来像这样：

$(document).ready(
function(){
    $("body").off("click", "#btn_toggle_transcript");
    $("body").on("click", "#btn_toggle_transcript",
        function(){
            $("#transcript_container").slideToggle(1000);
        }
    );
}
);

现在，我的滑动 div 打开并保持打开状态，直到我再次将其关闭。耶！

非常感谢所有回答/评论的人。您的建议和指导帮助我找到了解决方案。

干杯!

更新： 正如我在其中一条评论中提到的，这是在 Drupal 内部运行的。正如还提到的，如果我注释掉单个绑定，则不会调用任何操作。我的推理是，由于删除一个绑定不再调用该操作，那么它不可能被绑定两次......

愚蠢！

虽然我是正确的，只有一个绑定代码块，但我完全忘记了我的模块已经将我的 js 文件添加到页面中。因为我还需要在非 Drupal 环境中部署内容，所以我还手动将 js 文件添加到我的页面中。 ...两个包含物意味着两个绑定。 ……这几天我就再也回不来了！

Answer 1

它的情况是点击被绑定了两次。看看你是否有这样做过的可能性。例如。在 js 文件中以及 html 文档中的脚本标签内。

此外，如果容器是动态的，您应该使用 live 而不是 click。

$("selector").live("click", function() { /*body*/ })

你可以试试这个。

$(document).ready(
function(){
    $("body").click( "#btn_toggle_transcript",
        function(){
            if(!$("#transcript_container").hasClass('opened')) {
              $("#transcript_container").slideDown(1000).addClass('opened');
            } else {
              $("#transcript_container").slideUp(1000);
            }
        }
    );
}
);

Answer 2

在我的答案末尾有一个新的解决方案。

我已经多次遇到同样的问题，并且肯定只调用了一次该函数。
由于某种原因， tween.end 变量的每一个小步骤都会诉诸于 0。我的解决方法如下：

$('body').on('click', '.toggle', function() {
    var ul = $(this).next('ul');
    if (!$(ul).hasClass('open')) {
        $(ul).slideDown({
            step: function(now, tween) {
                if (tween.end == 0) {
                    stop();
                }
            },
            complete: function() {
                $(ul).addClass('open');
            }
        });
    } else {
        $(ul).slideUp('', '', function() {
            $(ul).removeClass('open');
        });
    }
});

有点混乱，但这就是我能想到的，因为我不能找到对该函数的另一个调用。

编辑

一个老问题 - 一个新的解决方案。

只需在 SlideToggle 之前添加 stop() 即可修复反复出现的溜溜球效果。

$('#element').stop().slideToggle();

Answer 3

您等待事件结束来添加班级。

$(document).ready(
    function(){
        $("body").click( "#btn_toggle_transcript",
            function(){
                if(!$("#transcript_container").hasClass('opened')) {
                    $("#transcript_container").slideDown(1000,function(){$(this).addClass('opened')});
                } else {
                    $("#transcript_container").slideUp(1000,function(){$(this).removeClass('opened')});
                }
            }
        );
    }
);