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.3.1文件替换了1.3.2更新文件，现在使用jQuery的v1.7.1我的DOM报告。

2）＆amp; 3）尽管我只绑定了click事件ONCE（通过删除绑定并在按钮点击时没有调用任何操作来验证），我决定尝试添加一行来删除我的“幻影”绑定，然后再添加我的实际捆绑。根据我的阅读，我决定使用现在推荐的on（）和off（）方法来添加/删除绑定。我的ready（）函数现在看起来像这样：

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

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

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

干杯！

更新：正如我在其中一条评论中提到的，这是在Drupal中运行的。如前所述，如果我注释掉单个绑定，则不会调用任何操作。我的理由是，由于删除了一个绑定不再调用该操作，因此它无法被绑定两次......

DUMB！

虽然我是正确的，只有一个绑定代码块，但我完全忘记了我的模块已经将我的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')});
                }
            }
        );
    }
);

如何停止jQuery slidetoggle溜溜球？

3 个答案: