Javascript Jquery onclick逻辑工作不正常

我正在尝试创建一个搜索表单容器。我希望它就像当我点击搜索表单打开器按钮，搜索表单将显示，其宽度将是100%

当我再次单击它时，搜索表单宽度将返回0。第一个正在工作，但当我单击返回时，表单的宽度未设置为0

有人能帮忙吗

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();
    if(header_search_cont.css("width","0")){
        header_search_cont.css("width","100%")
        search_box.focus();
        header_search_cont.css("opacity","1");
        header_search_cont.css("transition","all .2s ease-in-out");
    }else if(header_search_cont.css("width","100%")){
        header_search_cont.css("width","0")
        header_search_cont.css("opacity","0");
        header_search_cont.css("transition","all .2s");

    }
    console.log("hhihihihi");

})

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



        <div id="header_search_cont" class="unstreched_search">
    <form action="" method="post" name="search_form" id="search_form" enctype="multipart/form-data">
        <button type="button" id="search_area_die"><svg id="search_die_svg" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                <g>
                    <g>
                        <path
                            d="M501.333,245.333H36.417l141.792-141.792c4.167-4.167,4.167-10.917,0-15.083c-4.167-4.167-10.917-4.167-15.083,0l-160,160c-4.167,4.167-4.167,10.917,0,15.083l160,160c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083L36.417,266.667h464.917c5.896,0,10.667-4.771,10.667-10.667S507.229,245.333,501.333,245.333z" />
                    </g>
                </g>
            </svg></button>
        <input type="search" name="search_box" id="search_box" placeholder="Search..."><button id="searchbtn"
            name="searchbtn"><svg class="search_ico_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
                style="enable-background:new 0 0 512 512;" xml:space="preserve">
                <g>
                    <g>
                        <path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792zM202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667
        S302.646,384,202.667,384z" />
                    </g>
                </g>
            </svg></button></form>
</div>

var header_right_search_btn=$（“#header_right_search_btn”）；
var header_search_cont=$（“#header_search_cont”）；
变量搜索框=$（“#搜索框”）；
标题\右\搜索\点击（功能（e）{
e、 预防默认值（）；
if（标题搜索内容css（“宽度”、“0”））{
标题搜索内容css（“宽度”、“100%”）
搜索_box.focus（）；
标题搜索内容css（“不透明度”、“1”）；
标题_搜索_cont.css（“过渡”、“所有.2易入易出”）；
}else if（标题搜索内容css（“宽度”、“100%”）{
标题搜索内容css（“宽度”、“0”）
标题搜索内容css（“不透明度”、“0”）；
标题搜索内容css（“过渡”、“全部2”）；
}
控制台日志（“hhihi”）；
})
var search_area_die=$（“#search_area_die”）；
搜索区域。单击（功能（e）{
e、 预防默认值（）；
标题搜索内容css（“宽度”、“0”）
标题搜索内容css（“不透明度”、“0”）；
标题搜索内容css（“过渡”、“全部2”）；
})
//搜索结束

简单的方法是使用

addClass（）

和

removeClass（）

函数，而不是使用

.css

，然后对于if语句，可以使用

if（$（选择器）.hasClass（））

var header_right_search_btn=$（“#header_right_search_btn”）；
var header_search_cont=$（“#header_search_cont”）；
变量搜索框=$（“#搜索框”）；
标题\右\搜索\点击（功能（e）{
e、 预防默认值（）；
如果（！header\u search\u cont.hasClass（'strech'）{//您也可以发布您的HTML吗？选择器可能错误。@Sid我已经发布了我的HTML。您可以查看它