Question

我只需点击一下即可发射2个事件。

请参阅此JSFIDDLE。用户应该能够反复点击以使箭头旋转，并且div移动，然后向后移动。

第一个绑定事件工作正常，箭头旋转，但div不会开始移动直到第二次单击。

HTML

<div class="arrow">
            <img src="http://www.avenir-telecom.co.uk/common_files/images/right-arrow.png" alt="Click here to show contracts" id="arrow"/>
</div>
<div id="page">
    <h1>Some Heading Here</h1>
    <p>This is some text to make the div look normal</p>
</div>

CSS

.arrow
{
    float: left;
}
#page
{
    width: 400px;
    position:relative;
    background-color: #1371BE;
    padding: 10px;
    margin-left: 35px;

}

的jQuery

$(function ($) {
    var value = 0;
    $('img#arrow')
    .bind('click',function(event){
       value += 180; 
       $(this).rotate({animateTo:value}, 300);
    })
    .bind('click',function(event){
        var x = $(this).data('open');
        $('#page').animate({
            left: (x) ? '100px' : '0',
            load: true
        }, 300);
        x ? $(this).data('open', false) : $(this).data('open', true);
    });

});

一定很简单！

Answer 1

您只需要验证x是否为undefined，如果是，请将其设为true。

if (x === undefined) x = true;

JFIDDLE

Answer 2

这是你在找什么？

    $('#page').animate({
        left: (!x) ? '100px' : '0',
        load: true
    }, 300);

http://jsfiddle.net/g2tAN/6/

我将2个结合成1，没有必要做2个不同的结合。还在左侧添加了!。我认为你在那里倒退了，这就是它无法正常工作的原因

Answer 3

添加.data("open", true)以便定义它。

$('img#arrow').data("open", true)
.bind('click',function(event){
   value += 180; 
   $(this).rotate({animateTo:value}, 300);
})

http://jsfiddle.net/prankol57/ZK6Pd/

此外，您的open似乎倒退了。如果open先前设置为false，它不应该打开吗？

jQuery点击事件需要在第二个绑定事件中点击2次才能触发

3 个答案: