Question

我有这个销售信息的侧边栏，我想要滑出并重新点击。现在它会滑出但是一旦点击它就不会滑回。如果有人能弄清楚为什么代码不起作用那就太好了。

另外，我希望div在你悬停时向左移动一点，但只有当它一直向左移动时。我这样做是为了让它更容易被点击。

这是html：

<div id="sidebar">
<div id="sales">
    <div id="salesbar">
        <img id="sales_img" src="/images/sales.png"/>
            <h3>Contact Sales</h3>
            <p>
                For more information 
                please email us or call:
            </p>
        </div>    
    </div>
</div>

Jquery的：

$(document).ready(function() {
        var sales = $('#sales', '#sidebar'),
            image = $('#sales_img', '#salesbar'),
            rt = sales.css('right');
    image.click(function(event) {           
        if(rt == '0px' || rt == '5px') {
            sales.animate({
                'right':'235px'
            }, 600); 
        } else {
            sales.animate({
                'right': '0px'
                }, 600);
        }
            event.preventDefault();
    }); 
sales.hover(
        function() {
            if(rt == '0px' || rt == '5px') {
                sales.css('right','5px');
            }
        }, function () {
            if(rt == '5px') {
                sales.css('right', '0px');
            }
        }
    );

    });

总结一下，我想点击销售栏上的一次，然后将其弹出并留在那里。然后当您再次单击它时，返回到它开始的位置。如果可能的话，如果你在悬停时移动超过5px然后在出去的路上就会很棒。

以下是带css的jsfiddle：http://jsfiddle.net/yzvswLwx/1/

先谢谢

Answer 1

不完全确定这是否是你所追求的效果，但看看这是否有帮助;

    $(document).ready(function () {
    var sales = $('#sales', '#sidebar'),
        image = $('#sales_img', '#salesbar'),
        rt = sales.css('right');
    image.click(function (event) {
        if (rt == '0px' || rt == '5px') {
            sales.animate({
                'right': '235px'
            }, 600);
        } else {
            sales.animate({
                'right': '0px'
            }, 600);
        }
        event.preventDefault();
    });
    image.hover(function () {
        if (sales.css('right') == '0px') {
            sales.css('right', '5px');
        }
    });
    $('#sales').mouseleave(function () {
        var pos = sales.css('right').substr(0, sales.css('right').length - 2);
        if (pos > 5) sales.animate({
            'right': '0px'
        }, 600);
    });
});

小提琴： http://jsfiddle.net/yzvswLwx/12/

Answer 2

让它发挥作用。感谢一堆@Baps的悬停和@dragonslovetacos的点击功能。

以下是我的观点：

$(document).ready(function() {
        var sales = $('#sales', '#sidebar'),
            image = $('#sales_img', '#salesbar'),
            rt = sales.css('right');


  image.click(function() {
    var $marginLefty = $('#sales');
    $marginLefty.animate({
      right: parseInt($marginLefty.css('right'),10) === 5 ?
        $marginLefty.outerWidth()-image.outerWidth(true) :
        0
    });
  });

image.hover(
    function () {
    if (sales.css('right') == '0px') {
        sales.css('right', '5px');
    }
    }, function() {
    if(sales.css('right') == '5px') {
        sales.css('right','0px');
        }
    }
    );        
});

让Div滑出然后再点击

2 个答案: