jquery - 带有百分比的 JQuery if else 语句

Question

所以这是我的代码：

$('li a').click(function(){
    if ( $('li').width() == '7%' ) {
        $('li').animate({
            width: '86%'
        },300);
    } else {
        $('li').animate({
            width: '7%'
        },300);
    }
});

百分比似乎没有用。如果我将其更改为像素，则完全是，但以百分比表示，似乎有错误。

有没有专业人士可以帮我解决这个问题？请！

==================================================== =================================

好的，现在我将其更改为 css：

$('li a').click(function(){
    if ( $('li').css('width') == '70px' ) {
        $('li').animate({
            width: '86%'
        },300);
    } else {
        $('li').animate({
            width: '70px'
        },300);
    }
});

但是当我将 70px 更改为 7% 时，它不起作用。为什么？

Answer 1

.width() 返回一个数字，而不是一个字符串，所以你必须自己计算百分比！

Answer 2

width()将返回元素的物理大小（以像素为单位）。您需要根据元素父项的宽度计算其百分比宽度。这样的事情可能对你有用：

var the_percentage = ($('li').width() / $('li').parent().width()) * 100;
if(the_percentage == 7)
{
    // Something here...
}
else
{
    // Something else here...
}

或者，您可以改为执行此检查：

var li = $('li');
if((li.parent().width() * 0.07) == li.width()) {

Answer 3

浏览器将百分比转换为像素，因此任何对宽度的调用都将返回像素的整数值。

获取容器宽度并乘以 0.07 并与之进行比较。