Question

我正在努力让这个圈子动画扩展崩溃工作，你可以看看它here。问题是一旦点击一个圆圈，然后下次要展开它时，第一次点击不响应只有第二次点击工作。我认为获得id的单个函数将解决这个问题，但我不知道如何做到这一点。

这是我的代码的一部分：

<ul class="circles">
<li>
    <div>
        <div class="clear"></div>
        <p id="circle_info_1_toggle"><a href="#" >Products</a></p>                          
    </div>
</li>
<li>
    <div>
        <div class="clear"></div>
        <p id="circle_info_2_toggle"><a href="#" >Machinery</a></p>                             
    </div>
</li>

<div id="circles_info_container"> 
    <div id="circle_info_1"> 
        <div class="wrapper">                               
            <h3>We use environmentally-friendly, non-toxic products in all of our work.</h3> 
            <a href="http://www.guarantee-green.com/our-products"><div class="circles_readmore"></div></a> 
        </div> 
    </div>  
    <div id="circle_info_2"> 
        <div class="wrapper">                   
            <h3>We use powerful, modern machinery that removes dirt, grime and soil.</h3> 
            <a href="http://www.guarantee-green.com/our-methods"><div class="circles_readmore"></div></a> 
        </div> 
    </div>

和jquery：

$(document).ready(function() {
/* Circle 1*/
$('#circle_info_1_toggle a').click(function() { return false; });   
$('#circle_info_1_toggle a, #circle_info_1').toggle(circle_open_1, circle_close_1);

/* Circle 2*/
$('#circle_info_2_toggle a').click(function() { return false; });   
$('#circle_info_2_toggle a, #circle_info_2').toggle(circle_open_2, circle_close_2);
}); 

// Functions
function close_all_circles() {
    $('#circle_info_1 .wrapper').animate({ height:'0px' }, {duration:250, queue:true});
    $('#circle_info_2 .wrapper').animate({ height:'0px' }, {duration:250, queue:true});
}

    /* Circle 1*/
    function circle_open_1() {  
        close_all_circles();
        $('#circle_info_1 .wrapper').animate({ height:'120px' }, {duration:250});   
    }
    function circle_close_1() {     
            $('#circle_info_1 .wrapper').animate({ height:'0px' }, {duration:250, queue:false});        
    }

    /* Circle 2*/
    function circle_open_2() {  
        close_all_circles();
        $('#circle_info_2 .wrapper').animate({ height:'120px' }, {duration:250});   
    }
    function circle_close_2() {     
            $('#circle_info_2 .wrapper').animate({ height:'0px' }, {duration:250, queue:false});        
    }

谢谢！

Answer 1

这是因为您使用的是toggle，它会通过备用点击来隐藏和显示部分。您的代码工作正常并且符合预期。

我的意思是，如果内容重传到圈1已经隐藏了，如果你第二次点击它，你会尝试再次隐藏相应的内容。什么都不做。

Answer 2

尝试这样的事情：

$('#circles a').click(function () {
    // close all.
    $('#circles_info_container .wrapper').animate({ height:'0px' }, {duration:250, queue:true});

    // open clicked one.
    var num = $(this).parent().attr('id').replace('circle_info_', '').replace('_toggle', '');
    $('#circle_info_' + num + ' .wrapper').animate({ height:'120px' }, {duration:250});   
});

如果要在开始设置打开动画之前确保关闭动画完成，可以通过传递给animate()的complete参数来实现，该参数是回调函数的委托，动画完成后调用。

动画多个div扩展崩溃问题

2 个答案: