Работа с классами jquery

135
06 августа 2018, 02:40

Учу JS. В чем суть. Есть инпут поиска (.search-input). изначально скрыт. Есть кнопка (.search), при клике на которую он появляется. Нужно сделать так чтобы пр клике по кнопке он появлялся, а при клике на странице - исчезал. То есть addClass и removeClass. Пробовал реализовать таким образом:

<script type="text/javascript">
            $(function(){
                $('.search').click(function(){
                    $('.search-input').addClass('show');
                    $(!'.search').click(function(){
                        $('.search-input').removeClass('show');
                    });
                });
            });
        </script>

но запутался. подскажите правильное решение, если можно с ссылкой на источник.

Answer 1

$(function() { 
  $('.search-input').on('blur', function (e) {$(this).removeClass('show');}); 
  $('.search').click(function() { 
    $('.search-input').addClass('show').focus(); 
  }); 
});
.search-input { 
  display: none; 
} 
.show { 
  display: inline-block; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type='text' class="search-input" /><br /> 
<input type='button' value="Show search field" class="search" />

Answer 2

Альтернативное решение (в Сафари не работает):

$("button").click(function () { 
  $("input").addClass('force-show').focus().removeClass('force-show') 
})
input { 
  display: none; 
} 
 
input.force-show, input:focus { 
  display: inline-block; 
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<button>Show input</button> <input>

READ ALSO
Запись чисел в файл с разделением
c#

Запись чисел в файл с разделением

День добрый, требуется записать в файл 5 чиселВопрос в том, как эти числа, считываемые с TextBox разделить запятой и вывести на новую строку в файл

 165
Как сделать button в виде треугольника в WPF?
c#

Как сделать button в виде треугольника в WPF?

Нашел множество примеров как сделать круглые кнопки, но не одного решения о том как сделать в виде треугольникаВозможно ли это, или лучше...

 243
Сравнить 2 значения, старое и новое в Job
c#

Сравнить 2 значения, старое и новое в Job

C# Консольное приложениеРеализована связка Topshelf+Quartz

 151
Запуск команды в подчиненном ViewModel
c#

Запуск команды в подчиненном ViewModel

В приложении имеется главное окно и множество userControlНа главном окне расположены все кнопки управления (такие как: добавление данных, редактирование...

 156