jquery - 如何停止 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) 尽管事实上我只绑定(bind)到单击事件一次(通过删除绑定(bind)并且在按钮单击时没有调用任何操作来验证)，但我决定尝试添加一行来删除我的“幻像”在添加实际绑定(bind)之前进行绑定(bind)。根据我的阅读，我决定使用现在推荐的 on() 和 off() 方法来添加/删除绑定(bind)。我的ready()函数现在看起来像这样:

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

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

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

干杯!

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

笨蛋!

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

Answer 1

点击绑定(bind)两次的情况。看看你是否有这样做过的可能性。例如。在 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);
            }
        }
    );
}
);