使用jQuery addClass进行转换时出错

Question

我有一个简单的input[type="text"]，我希望在点击它时转换它的宽度。

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

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

这是我的小提琴：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

Answer 2

问题是CSS specificity，其中id-rule优先于class-rule。您可以通过组合id和类值来创建具有更高优先级的规则。

#menu.slide {
    width:180px;
}

演示：Fiddle

Answer 3

由于CSS特异性，将其更改为

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

#menu.slide {
    width:180px;
}

FIDDLE

ID上设置的样式会覆盖类的样式，因为ID更具体。

Answer 4

jsFiddle

CSS ID选择器比类选择器更具体，除非您在规则中包含!important。

.slide {
    width:180px !important;
}

!important将覆盖所有其他CSS规则。如评论中所述，如果您有一种更有机的方式来提高规则的特异性，例如使用ID #menu.slide，那么通常首选使用!important，因为这会产生不希望的冲突与其他样式表。但是，该特定示例仅在您将此解决方案用于单个文本框时才有效。

此外，您需要在依赖DOM的处理程序中包装依赖于DOM元素的jQuery代码：

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