如果元素宽度等于 .. 像素，则执行 addClass

Question

所以我有这个搜索框，它通过改变宽度来显示和隐藏现在我想在搜索图标中添加一个 class 如果它的宽度大于零

$("#search input").animate({width: "0px"}, 0);
var searchWidth = $('#search input').width();

$('#search i').click( function() {
    //Change the width (show it)
    var toggleWidth = $("#search input").width() == 150 ? "0px" : "150px";
    $('#search input').animate({ width: toggleWidth });

    //Make the search icon red
    if ( searchWidth > 0 ) {
        $("#search i").addClass("active");
    } else {
        $("#search i").removeClass("active");
    }
});

现在它可以与 toggleClass 一起使用，但是如果你点击的速度比动画快，它就会搞砸，所以这就是我尝试上面的原因......

    //Change the width (show it)
    var toggleWidth = $("#search input").width() == 150 ? "0px" : "150px";
    $('#search input').animate({ width: toggleWidth });
    //Make the search icon red
    $("#search i").toggleClass("active");

Answer 1

将 searchWidth 计算逻辑移至下方，因为您要更改点击时的宽度。

$("#search input").animate({width: "0px"}, 0);
//var searchWidth = $('#search input').width();

$('#search i').click( function() {
    //Change the width (show it)
    var toggleWidth = $("#search input").width() == 150 ? "0px" : "150px";
    $('#search input').animate({ width: toggleWidth });
var searchWidth = $('#search input').width();
    //Make the search icon red
    if ( searchWidth > 0 ) {
        $("#search i").addClass("active");
    } else {
        $("#search i").removeClass("active");
    }
});

如果元素宽度等于 .. 像素，则执行 addClass

Execute addClass if element width equals .. pixels

jquery

css

width

addclass