Добавить другой класс на конкретный div на фокус ввода

-1

Я пытаюсь найти решение проблемы с поиском. Панель поиска должна вести себя по-разному на смартфонах, поэтому мне нужно добавить еще один класс в div, где находится панель поиска.Добавить другой класс на конкретный div на фокус ввода

Когда я нажимаю на поле ввода, div с классом «подсвечивается» должен получить другой класс. До сих пор я просто нашел решение добавить класс в следующий или partent div, но это не то, что я искал.

<div class="highlighted"> 
 
    <div class="region region-highlighted"> 
 
    <section id="block-x" class="contextual-region block clearfix"> 
 
     <div data-contextual-id="block:block=x:langcode=en|block_content:block_content=20:changed=1462269631&amp;ds_bundle=basic&amp;ds_view_mode=default&amp;langcode=en"></div> 
 
     <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"> 
 
     <p>x</p> 
 
     </div> 
 
    </section> 
 

 
    <div class="search-block-form contextual-region block block-search" data-drupal-selector="search-block-form" id="block-bootstrap-search" role="search"> 
 

 
     <div data-contextual-id="block:block=bootstrap_search:langcode=en"></div> 
 
     <form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8"> 
 
     <div class="form-item js-form-item form-type-search js-form-type-search form-item-keys js-form-item-keys form-no-label form-group"> 
 
      <label for="edit-keys--2" class="control-label sr-only">Search</label> 
 
      <div class="input-group"> 
 
      <input title="Enter the terms you wish to search for." data-drupal-selector="edit-keys" class="form-search form-control" placeholder="Search" type="search" id="edit-keys--2" name="keys" value="" size="15" maxlength="128"><span class="input-group-btn"><button type="submit" value="Search" class="button js-form-submit form-submit btn-primary btn icon-only" name=""><span class="sr-only">Search</span><span class="icon glyphicon glyphicon-search" aria-hidden="true"></span> 
 
      </button> 
 
      </span> 
 
      </div> 
 
      <div id="edit-keys--2--description" class="description help-block">Enter the terms you wish to search for.</div> 
 
     </div> 
 

 
     <div class="form-actions form-group js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions"></div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-05-04 Denis S.

где это JQuery/CSS? – sweaver2112

. Highlighted: focus psuedoclass должен делать то, что вы хотите. Помните, что старые браузеры могут не поддерживать это. –

Не уверен, что вы пытаетесь, но что-то вроде $('.highlighted').addClass('otherclass'); должен работать.

Редактировать после комментария:

$('.input-group input').focus(function() { $('.highlighted').addClass('open'); }) 
$('.input-group input').blur(function() {$('.highlighted').removeClass('open'); });

(Единственное изменение необходимо в код был последний селектор я просто положить его в 2 линии для ясности.).

источник

2016-05-04 15:04:46 GertG

Спасибо за ваш ответ. Это почти то, что я искал, но это должно произойти только тогда, когда я щелкнул внутри входа в панель поиска. Поэтому я попробовал это, но класс не был удален, когда поле ввода не было в фокусе. $ ('. Input-group input'). Focus (function() { $ ('. Highlight'). AddClass ('open'); }). Blur (function() { $ (this) .parent(). removeClass ('open'); }); –

Это работает. Благодаря! –

Добавить другой класс на конкретный div на фокус ввода

ответ

Смежные вопросы