Question

结帐http://social.allthingswebdesign.com。如果单击“获取社交”链接，它会弹出，当您将鼠标移开时，它会返回到它开始的位置。

现在，如果您单击“获取社交”链接，当它弹出时，单击“X”关闭它，它会走得太远，然后弹出。

检查出来，你会明白我的意思。这似乎是一件非常简单的事情，但我有一个严重的脑屁并且无法弄明白。

这是jQuery代码：

$(document).ready(function() {
        $('body').prepend('<div id="social"><div id="outer"><span><img src="getSocial.png" alt="Get Social" />' +
                            '<ul id="icons"><li><img class="tiny" src="fb.png" alt="Facebook" /></li><li><img class="tiny" src="twit.png" alt="Twitter" /></li></ul>' +
                            '</span></div><div id="inner"><div id="innest"><ul><li>'+
                            '<img src="fb.png" alt="Facebook" /><a href="#">Find Us On Facebook</a>'+
                            '</li><li>'+
                            '<img src="twit.png" alt="Twitter" /><a href="#">Follow Us On Twitter</a>'+
                            '</li></ul><div id="close"><a id="closeB" href="#">X</a></div></div></div></div>');

        $('#social').live('hover', function() {
            var $lefty = $(this);
            $lefty.stop().animate({
                marginLeft: parseInt($lefty.css('marginLeft')) == -302 ? 
                -295 : -302
            }, 200);
        });

        $('#social').live('click', function() {
            var $lefty = $(this);
            $lefty.stop().animate({
                marginLeft: parseInt($lefty.css('marginLeft')) == 0 ? 
                (40 - $lefty.outerWidth()) : 0
            }, 200);
        });

        $('#closeB').live('click', function() {
            var $button = $(this).parent('#social');
            $button.stop().animate({
                marginLeft: parseInt($button.css('marginLeft')) == 0 ? 
                -302 : 0
            }, 200);
        });

    });

Answer 1

似乎closeB只需要将其设置为-295而不是-302。

$('#closeB').live('click', function() {
    var $button = $(this).parent('#social');
    $button.stop().animate({
        marginLeft: parseInt($button.css('marginLeft')) == 0 ? 
        -295 : 0
    }, 200);
});

当我使用上面的代码将自己的关闭按钮应用于滑动框时，它可以正常工作。

您可能希望执行CSS重置以在浏览器中规范化某些CSS。由于你依赖于窗口的边缘，我猜这是必要的。

Answer 2

我不知道你的代码是如何工作的，因为这一行：

var $button = $(this).parent('#social');

返回空白$button。您应该使用closest()代替parent

实例：http://jsfiddle.net/marcosfromero/5qGZc/

修改

首先：stopPropagation事件的$('#closeB').live('click'...，以阻止调用$('#social').live('click...事件处理程序：

$('#closeB').click(function(event) { var $button = $(this).closest('#social'); --> event.stopPropagation(); <-- $button.stop().animate({ marginLeft: parseInt($button.css('marginLeft')) == 0 ? -302 : 0 }, 200); });

第二：不要计算$('#social').live('click...上的新位置，而是使用固定位置（与其他处理程序一样）：

$('#social').click(function() { var $lefty = $(this); $lefty.stop().animate({ marginLeft: parseInt($lefty.css('marginLeft')) == 0 ? ->> -302 <--: 0 }, 200); });

第三：您可以使用live甚至更短的bind，而不是使用click。

第二次编辑： 关闭“社交”框后，它的位置就像它悬停在哪里一样。要防止这种情况发生，请使用event.type：
，而不是使用当前保证金
$('#social').live('hover', function(event) { var $lefty = $(this); $lefty.stop().animate({ --> marginLeft: event.type == 'mouseenter' ? <-- -295 : -302 }, 200); });

因为当前边距可以通过click处理程序更新，原始hover处理程序没有注意到这一点。

简单的jQuery问题

2 个答案: