[英]Add another class on a specific div on input focus
I'm trying to find a solution for my searchbar problem.我正在尝试为我的搜索栏问题寻找解决方案。 The searchbar should behave differently on smartphones so I need to add another class to the div, where the searchbar is placed.搜索栏在智能手机上的行为应该有所不同,因此我需要向放置搜索栏的 div 添加另一个类。
When I click on the input field, the div with the class "highlighted" should get another class.当我点击输入字段时,类“突出显示”的 div 应该得到另一个类。 Until now I just found solution to add a class to a next or partent div, but that's not what I was searching for.直到现在,我才找到了将类添加到下一个或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&ds_bundle=basic&ds_view_mode=default&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>
Not sure what you're trying, but something like $('.highlighted').addClass('otherclass');
不确定您在尝试什么,但类似于$('.highlighted').addClass('otherclass');
should work.应该管用。
Edit after comment:评论后编辑:
$('.input-group input').focus(function () { $('.highlighted').addClass('open'); })
$('.input-group input').blur(function () {$('.highlighted').removeClass('open'); });
(The only change needed to your code was the last selector. I'm just putting it in 2 lines for clarity.) (您的代码唯一需要更改的是最后一个选择器。为了清楚起见,我只是将它放在 2 行中。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.