Question

我正在尝试在列表项单击上显示动画。相同的动画使用按钮单击而不是列表项在控制台上无异常打印。

这是我的代码。

function animateButtons(clicked_btn_id){
    var circle = $('#' + clicked_btn_id + ' .circle');

    if (!circle.length) {
        $('#' + clicked_btn_id).append('<div class="circle"></div>');
            circle = $('#' + clicked_btn_id + ' .circle');
        }

        setTimeout(function(){
            circle.toggleClass('open');  
        });

        setTimeout(function() {
            //change image back
            circle.toggleClass('open');
        }, 300);
    }   
}

function clickedControlButton(clicked_btn_id){      
    animateButtons(clicked_btn_id);
}

这是html代码。

<div class="wrapper">
    <ul class="nav nav-tabs list" id="myTab">
        <li>
            <img src="images/one.png" class="img-circle center-block img-reponsive" alt="one" onclick="clickedControlButton(this.id)" id="btnone">
            <p style="color:white;" class="index-footer-btn-text" id="oneText"> one </p>
        </li>
        <li>
            <img src="images/two.png" class="img-circle center-block img-reponsive" alt="two" onclick="clickedControlButton(this.id)" id="btntwo">
            <p style="color:white;" class="index-footer-btn-text" id="twoText"> two </p>
        </li>
        <li>
            <img src="images/three.png" class="img-circle center-block img-reponsive" alt="three" onclick="clickedControlButton(this.id)" id="btnthree">
            <p style="color:white;" class="index-footer-btn-text" id="threeText"> three </p>
        </li>          

    </ul>
</div>

Answer 1

您可能需要将侦听器添加到列表项而不是图像。图像不支持嵌套元素，这意味着您无法在图像中添加任何圆圈，因此您需要将其添加到列表中并使用CSS对其进行格式化以便按照您的意愿进行查看。

所以：

从img元素中删除onclick事件
为列表元素提供一些id
将事件附加到列表元素
使用CSS格式化您的圈子

这是一个具有您想要实现的功能的JSFiddle： https://jsfiddle.net/oz15hzsb/

以下是如何附加侦听器：

$('.nav-tabs li').click(function(){
    animateButtons($(this).attr('id'));
})

动画不与列表项一起使用

1 个答案: