Jquery onclick方法异常：搜索表单无法正常收起的问题

嘿，我一眼就发现你的代码里的关键问题啦——条件判断里误用了赋值操作，导致收起逻辑根本不会触发！让我给你一步步讲清楚怎么修复：

问题根源 #

你写的if(header_search_cont.css("width","0"))其实是在给元素设置宽度为0，这个表达式返回的是jQuery对象（永远为真），所以每次点击按钮都会执行展开的逻辑，完全走不到收起的分支里。

修复方案1：修正条件判断逻辑 #

把判断改成获取当前宽度并和目标值比较（注意要带上单位，比如"0px"），同时把样式设置合并成对象形式，让代码更简洁：

var header_right_search_btn =$("#header_right_search_btn"); 
var header_search_cont = $("#header_search_cont"); 
var search_box = $("#search_box"); 

header_right_search_btn.click(function(e){ 
    e.preventDefault(); 
    // 获取当前宽度，注意返回值自带单位
    var currentWidth = header_search_cont.css("width");
    if(currentWidth === "0px"){ 
        header_search_cont.css({
            "width": "100%",
            "opacity": "1",
            "transition": "all .2s ease-in-out"
        });
        search_box.focus(); 
    } else { 
        header_search_cont.css({
            "width": "0",
            "opacity": "0",
            "transition": "all .2s"
        });
    } 
}); 

var search_area_die = $("#search_area_die"); 
search_area_die.click(function(e){ 
    e.preventDefault(); 
    header_search_cont.css({
        "width": "0",
        "opacity": "0",
        "transition": "all .2s"
    });
}); 

优化方案2：用CSS类控制状态（更推荐） #

把样式逻辑放到CSS里，用JS切换类会更易维护，还能避免重复写样式代码：

第一步：添加CSS样式 #

#header_search_cont {
    width: 0;
    opacity: 0;
    transition: all .2s ease-in-out;
}
#header_search_cont.expanded {
    width: 100%;
    opacity: 1;
}

第二步：简化JS代码 #

var header_right_search_btn =$("#header_right_search_btn"); 
var header_search_cont = $("#header_search_cont"); 
var search_box = $("#search_box"); 

header_right_search_btn.click(function(e){ 
    e.preventDefault(); 
    // 切换expanded类，自动触发CSS样式变化
    header_search_cont.toggleClass("expanded");
    // 展开时自动聚焦搜索框
    if(header_search_cont.hasClass("expanded")){
        search_box.focus();
    }
}); 

var search_area_die = $("#search_area_die"); 
search_area_die.click(function(e){ 
    e.preventDefault(); 
    header_search_cont.removeClass("expanded");
}); 

这种方式把样式和行为分离，后期调整样式直接改CSS就行，不用动JS，代码也更清爽～

内容的提问来源于stack exchange，提问作者tahuislam