在输入焦点上的特定 div 上添加另一个类答案

【问题标题】：Add another class on a specific div on input focus在输入焦点上的特定 div 上添加另一个类
【发布时间】：2016-05-04 14:52:37
【问题描述】：

我正在尝试为我的搜索栏问题寻找解决方案。搜索栏在智能手机上的行为应该有所不同，因此我需要在 div 中添加另一个类，即放置搜索栏的位置。

当我单击输入字段时，“突出显示”类的 div 应该得到另一个类。到目前为止，我只是找到了将类添加到下一个或部分 div 的解决方案，但这不是我要寻找的。p>

<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>

【问题讨论】：

jquery/css 在哪里？
.highlighted:focus psuedoclass 应该做你想做的事。请记住，旧版浏览器可能不支持此功能。

标签： javascript jquery css twitter-bootstrap drupal

【解决方案1】：

不确定你在尝试什么，但像 $('.highlighted').addClass('otherclass'); 这样的东西应该可以工作。

评论后编辑：

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

（您的代码唯一需要更改的是最后一个选择器。为了清楚起见，我只是将其放在 2 行中。）

【讨论】：

感谢您的回复。这几乎就是我要搜索的内容，但这应该只发生在我在搜索栏的输入内单击时。所以我尝试了这个，但是当输入字段没有聚焦时，类没有被删除。 $('.input-group input').focus(function () { $('.highlighted').addClass('open'); }).blur(function () { $(this).parent(). removeClass('open'); });