как сделать так чтобы при нажатии на поиск исчезли блоки

Question

как сделать так чтобы при нажатии на поиск исчезли блоки

Рейтинг: 0Ответов: 1Опубликовано: 28.03.2023

Добрый день или вечер проблема с JS мне надо чтобы при нажатии на input из div class=lil скрыл div class=ResContent HTML

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="index.css">
  <meta charset="utf-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
  <title>MOCT</title>
</head>
<body class="body">
<div class="RecContent">

<div class="cassa">касса для бизнесса</div>


</div>
  <div class="content">

    <div class="logo-name">MOCT</div>

    <div class="lil" >

        <form>
            <input class="input" type="search" placeholder="Искать здесь...">
              <button type="submit"></button>

                <button <link onclick="window.location.href = 'home.html';" id="form" type="button" name="button">тут что то написанно</button>
                <button <link onclick="window.location.href = 'home.html';" id="form1" type="button" name="button">тут что то напbrtbrtанно</button>

        </form>

    <div class="logo"> <img class="logo" src="https://sun9-80.userapi.com/impg/YCg1b8A-6VW2qjgCmhWemmnplyOxIEnXiFzpbg/i5g_sJ6bPHM.jpg?size=1464x1695&quality=95&sign=db78b9f1accc5b3ee2f05b45d050dcc2&type=album" alt="">  </div>
  </div>
<script src="index.js"></script>
</body>

javascript css3

Источник: Stack Overflow на русском

Answer 1

▲ 0

Если Вы хотите сделать это на чистом JavaScript, можно использовать следующий подход:

Добавляем обработчик события DOMContentLoaded, который вызывает анонимную функцию при загрузке страницы.
Находим элементы input и RecContent
Добавляем обработчик события focus на элемент input и скрываем элемент RecContent путем добавления свойства display: none. Событие focus происходит, когда элемент получает фокус ввода
Добавляем обработчик события blur на элемент input и добавляем свойство display: block для RecContent, чтобы он снова стал видимым. Событие blur происходит, когда элемент теряет фокус ввода.

document.addEventListener('DOMContentLoaded', function() {
  const input = document.querySelector('.input');
  const recContent = document.querySelector('.RecContent');

  console.log(input, recContent);

  input.addEventListener('focus', function() {
    if (recContent !== null) {
      recContent.setAttribute('style', 'display: none;');
    }
    console.log('Скрыто');
  });

  input.addEventListener('blur', function() {
    if (recContent !== null) {
      recContent.setAttribute('style', 'display: block;');
    }
  });
});

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="index.css">
  <meta charset="utf-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
  <title>MOCT</title>
</head>
<body class="body">
<div class="RecContent">

<div class="cassa">касса для бизнесса</div>


</div>
  <div class="content">

    <div class="logo-name">MOCT</div>

    <div class="lil" >

        <form>
            <input class="input" type="search" placeholder="Искать здесь...">
              <button type="submit"></button>

                <button <link id="form" type="button" name="button">тут что то написанно</button>
                <button <link id="form1" type="button" name="button">тут что то напbrtbrtанно</button>

        </form>

    <div class="logo"> <img class="logo" src="https://sun9-80.userapi.com/impg/YCg1b8A-6VW2qjgCmhWemmnplyOxIEnXiFzpbg/i5g_sJ6bPHM.jpg?size=1464x1695&quality=95&sign=db78b9f1accc5b3ee2f05b45d050dcc2&type=album" alt="">  </div>
  </div>
<script src="index.js"></script>
</body>

Если Вы используете библиотеку jQuery, то можно использовать аналогичных подход:

  $(document).ready(function () {
    const input = $('.input');
    const resContent = $('.ResContent');

    input.on('focus', function () {
      if (resContent !== null) {
        resContent.css('display', 'none');
      }
      console.log('Скрыто');
    });

    input.on('blur', function () {
      if (resContent !== null) {
        resContent.css('display', 'block');
      }
    });
  });

В общем и целом, вариантов решения этой задачи много. Вот еще некоторые из них:

Использовать свойство CSS display элемента, чтобы скрывать/показывать его.
Если Вы используете jQuery, можно использовать методы .hide() и .show(), которые позволяют скрывать/показывать элементы
Добавить в CSS класс, например, .hidden со свойством display: none и через JavaScript или jQuery добавлять/убирать класс при focus/blur

как сделать так чтобы при нажатии на поиск исчезли блоки

Ответы