Jquery onclick logi c не работает должным образом - PullRequest
Новая
       7

Jquery onclick logi c не работает должным образом

0 голосов
/ 09 февраля 2020

Я пытаюсь сделать контейнер формы поиска. Я хочу, чтобы это было так, как если бы я нажимал на кнопку открывания формы поиска, форма поиска отображалась, и ее ширина составляла 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>

1 Ответ

0 голосов
/ 09 февраля 2020

Простой способ - использовать функции addClass() и removeClass() вместо .css Тогда для оператора if можно использовать if($(selector).hasClass()) 

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.hasClass('strech')){  //<< if not hasClass() strech
        search_box.focus();
        header_search_cont.addClass('strech');   // addClass()
    }else{
        header_search_cont.removeClass('strech'); // removeClass()
    }
    console.log("hhihihihi");

})

var search_area_die = $("#search_area_die");
search_area_die.click(function(e){
    e.preventDefault();
    header_search_cont.removeClass('strech'); //<< removeClass()
})
//search ends
#header_search_cont{
  width : 0px;
  opacity : 0;
  transition : all .2s ease-in-out;
  overflow : hidden;
  background : red;
  padding : 10px;
  box-sizing : border-box;
}
#header_search_cont.strech{
  width : 100%;
  opacity : 1;
  transition : all .2s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header_right_search_btn">Open Search</div>
<div id="header_search_cont">
  <form>
    <input id="search_box" type="search" placeholder="search" />
    <input id="search_area_die" type="submit" value="search"/>
  </form>
</div>

Объяснение:

  • Добавить / удалить класс strech в элемент при нажатии

  • Проверьте класс strech с помощью .hasclass('strech')). Знак ! означает NOT, поэтому !$(selector).hasClass('strech') означает, что если элемент не имеет этого класса

...