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

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

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

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

JS

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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
1
2
3
4
5
6
7
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .