Question

我试图在每次点击“.expander”div时触发此点击事件。它工作一次然后停止工作。不确定从这里做什么。

jquery也设置为自动滚动“.expander”div中的内容并执行此操作。它也是停止滚动点击或滚动鼠标，就像它应该的那样。

但无论如何我似乎无法弄清楚如何让点击事件更多一次。所以它并没有像它应该的那样切换。

先谢谢!!

-Jackson

HTML

<div class="resume group">
        <div class="group">
            <img src="images/">
            <div>
                <h1>Achievements</h1>
                <ul>
                <li>content</li>
                <li>content</li>
                <li>content</li>
                <li>content</li>
                </ul>
            <h2>Read my resume <a href="#" class="expander">here!</a></h2>
            </div>
            .</div>

        <div id="full-resume" class="content">
            <p> a bunch of content goes here.</p>
         </div>

Jquery的

        $("#full-resume").hide();



        $(".expander").click(function () {
            $("#full-resume").fadeToggle("slow");
            $('html, body').animate({
                    scrollTop: $(".expander").offset().top -160 }, 450);
             $("#full-resume").animate({scrollTop: $(document).height()}, 80000, 'linear');

            $("#full-resume").click(function (){
                $(this).stop();})


           $("#full-resume").bind("mousedown DOMMouseScroll mousewheel keyup", function(){
                          $('#full-resume').stop();
                         });

            event.preventDefault();
            return false;
        });

这是http://jsfiddle.net/jacksonvoice/Br9C3/3/

的jsfiddle

Answer 1

您尚未声明任何名为“event”的变量。您希望将其作为参数获取，但不是。所以我想你的行

event.preventDefault();

失败，浏览器停止评估JS代码。尝试解决它，让我们知道它。这应该有效：

$(".expander").click(function (event) {

编辑：在此之后你的第二个问题（你不能多次淡入你的div）。在隐藏/显示之前，您必须直接停止DIV上的任何动画（滚动！）。点击处理程序开头的这一行使它对我有用：

$('.expander').click(function(event) {
    $('#full-resume').stop();
    //...existing function-body...
});

要想先了解一下，在输入方法时，您应该只知道是否隐藏或展示了容器。在每种情况下，你应该做不同的事情（隐藏时不动画滚动等）。无论如何，事件处理程序应该被安装在任何其他处理程序之外。

Answer 2

在函数中传递event参数并删除return false。

Answer 3

您的代码中存在两个问题：

您在另一个点击事件中绑定了click事件，这是没用的。您已经将多个事件绑定到＃full-resume，因此您可以删除click事件，因为它与mousedown是多余的
toggleFade动画与自动滚动之间必定存在冲突。要防止它，您必须在触发淡入淡出之前停止自动滚动，如下所示：

$(".expander").click(function () {
    $("#full-resume").stop();
    $("#full-resume").fadeToggle("slow");

这是the working jsFiddle

.fadeToggle上的Jquery .click事件，动画文本仅触发一次

3 个答案: