Question

首先感谢阅读并抱歉我的英语。

我正在尝试创建一个动态菜单，您单击该图标，然后选择动画字段（li）以获得更大的宽度。当我单击该字段时，它会完美地动画并获得宽度，并将其类别从“未选定”更改为“已选择”。然后，当我再次点击它时，它没有得到它的初始宽度。

JQUERY：

$(document).ready(function(){

    $("li.unselected").on("click",expand);
    $("li.selected").on("click",reduce);

    function expand(){
        $(this).animate({
            width: '150px'
        });
        $(this).removeClass("unselected");
        $(this).addClass("selected");
    }

    function reduce(){
        $(this).animate({
            width: '30px'
        });
        $(this).removeClass("selected");
        $(this).addClass("unselected");
    }
});

PD：我已经检查了HTML代码，因为它正在工作，并且该类完全从“未选择”更改为“已选择”，但它不起作用。

Answer 1

如果您将侦听器更改为绑定到文档，它应该可以正常工作：

$(document).on("click","li.unselected", expand);
$(document).on("click","li.selected", reduce);

http://jsfiddle.net/b5PB2/1/

您还可以使用css过渡进行管理： http://jsfiddle.net/b5PB2/

//html    
<ul class="list">
    <li>Something</li>
    <li>Something Else</li>
</ul>

//css
.list li{
    width:30px;
    height:20px;
    overflow:hidden;
    background:#d1d1d1;
    margin-bottom:10px;
    transition: width 0.5s linear;
}

.list li.selected{
   width:150px;
   transition: width 0.5s linear;
}

//basic jquery listener to toggle class
$(document).ready(function(){
    $('.list li').on('click', function(){
        $(this).toggleClass('selected');
    });
});

旁注 - 我使用sass和autoprefixer，因此转换会自动生成webkit等各种需求。你需要查找css转换所需的前缀才能在所有浏览器中运行。

.animate（）工作正常，但不是两次

1 个答案: