动画不适用于列表项答案

【问题标题】：Animation not working with list item动画不适用于列表项
【发布时间】：2017-01-23 16:14:32
【问题描述】：

我正在尝试在列表项单击时显示动画。相同的动画适用于按钮单击，但不适用于列表项。
在控制台上打印没有异常。

这是我的代码。

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>

【问题讨论】：

var circle = $('#' + clicked_btn_id + ' .circle'); 似乎正在返回 null ？
1.请包括实际工作的按钮的代码，演示会很好.... 2.您没有将事件绑定到列表项，而是使用 img 标签，这会使您的代码无效，在 img 内附加一个 div .
@DaniP 是正确的！.. 实际上它是在 <img> 内拧一个 <div>，这很奇怪。

标签： javascript html css twitter-bootstrap animation

【解决方案1】：

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

所以：

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

这是一个 JSFiddle，其中包含您想要实现的功能： https://jsfiddle.net/oz15hzsb/

以下是附加监听器的方法：

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

【讨论】：