Question

我有一个问题，我需要用div包围一个选择框。该选择框是透明的，因此包括焦点样式在内的样式需要在周围的div上进行。我一直在尝试检测选择框是否已被聚焦，如果是，则添加一个类。但似乎没有什么工作......我还使用了.is：focus的脚本，它在大多数浏览器中运行良好但在IE中并不是IE，特别是IE8，不幸的是我必须支持。有人可以帮忙吗？

 <div class="styled-select">
<select id="Title" name="Title" required autofocus="autofocus">
     <option value="" selected=yes> Title </option>
     <option value="Ms" > Ms </option>
    <option value="Mrs" > Mrs </option>
 </select>
</div>    

var select = $('select:focus');    

$(select).each(function(){
      $('.styled-select').addClass('focus');
  });

Answer 1

我认为你只需要改变每个焦点：

 $('#Title').focusin(function(){
      $(this).parent().addClass('focus');
  });

DEMO HERE

Answer 2

我应该添加一个click事件，检测似乎对select不起作用的焦点。 .focus可以通过点击设置，并通过更改事件删除，但更改事件也是一个点击，所以它应该如下所示：

$("#Title").click(function () {
    if ($('.styled-select').hasClass('focus')) {
        $('.styled-select').removeClass('focus');
    } else {
        $('.styled-select').addClass('focus');
    }
});

小提琴：http://jsfiddle.net/W5sYv/1/

检测焦点在选择框上以更改周围DIV中的类/样式

2 个答案: