使用jQuery addClass进行转换时出错

Question

我有一个简单的input[type="text"],我想在点击它时转换它的宽度.

我的意思是我想在左边滑动它:demo

我不知道为什么这不起作用.

这是我的小提琴:演示

<input type="text" id="menu" />

这是我的CSS.

#menu {
    width:32px;
    position:absolute;
    right:50%;
    transition: width .8s;
}

.slide {
    width:180px;
}

这是我的JS.

$("#menu").click(function() {
    $(this).addClass("slide");
});

Answer 1

你不必为此使用jQuery.

你可以使用:focus选择器.

只需将其添加到您的CSS中即可

#menu:focus {
    width:180px;
}

DEMO