Код работает, но не так как надо

@NNNNik993 · Регистрация: 28.11.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Нужно, чтобы строка поиска увеличивалась в длине от 0px до 130px при нажатии кнопки. При нажатии строка прибавляет 130px, но сразу же возвращается в исходное состояние 0px. Подскажите пожалуйста мне, нубу, как сделать так, чтобы она разворачивалась и сворачивалась ТОЛЬКО ПРИ КЛИКЕ.

JS

Javascript

$(document).ready(function(){
            $('#lup').click(function(event) {
                $('#searcher_r')
                .animate({right: "0", width: "130px"}, 500);
            });
            $("#lup").click(function(){
                $('#searcher_r')
                .animate({right: "0", width: "0px"}, 500);
            });
 
 });

CSS

#lup{
    margin-left: 1520px;
    margin-top: -30px;
    cursor: pointer;
}
#searcher{
    z-index: 111;
    position: absolute;
    left: 1520px;
    top: 103px;
    width: 135px;
    height: 15px;
}
#searcher_r{
    width: 0px;
    border-radius: 11px;
    position: relative;
}

HTML

HTML5

<div id="lup">
   <img src="https://www.cyberforum.ru/images/lup.png">
 </div> 
 
<div  id="searcher">
    <input type="text" id="searcher_r" placeholder="  Поиск...">
 </div>

@arcmag · 29.11.2015, 08:41

PHP/HTML

<html>
<head>
<script>
    function increaseSearch (button, text, len) {
        var btn   = typeof button === "string" ? document.querySelector (button) : button,
            t     = typeof text === "string"   ? document.querySelector (text) : text,
            l     = typeof len !== "undefined" ? len : 135,
            p     = parseInt (getComputedStyle (t)["padding"]),
            b     = getComputedStyle (t)["border"],
            css   = function (e, css) {for (var i in css) {e.style[i] = css[i];}},
            click = function () {
                css (t, t.offsetWidth === 0 ? {width: l + "px", padding: p + "px", border: b} :
                        {width: 0 + "px", padding: 0 + "px", border: 0});
            };
 
        btn.addEventListener ("click", click);
    }
 
    window.addEventListener ("load", function () {
        // increaseSearch ("селектор кнопки", "селектор текстового поля", желаемая ширина текстового поля);
        increaseSearch ("#btn", "#searcher_r");
    });
</script>
</head>
<body>
<input type="button" id="btn" value="click">
 
        <div id="searcher">
            <input type="text" id="searcher_r" placeholder=" Поиск...">
        </div>
</body>
</html>

	29.11.2015, 08:41

Опции темы