5

我有这样的代码：

<div class="lighter">
  <form method="get" action="http://www.google.pl" id="search">
    <span>
      <input id="button_search" type="image" src="images/search.png" id="button_search"/>
    </span>
    <span>
      <input type="text" class="search rounded" placeholder="Search...">
    </span>
    <div class= "list_search">
      <ul>
        <li class="search_link"><a href="">Search all of Movies</a></li>
        <li class="search_link"><a href="">Advanced Search</a></li>
      </ul>
    </div>
  </form>
</div>

是否可以简单地使用 css 来产生当 input type="text" 处于焦点时 list_search 会出现的效果？如果是，如何？

非常感谢您的帮助

4

2 回答 2

27

如果您能够稍微更改您的标记，这实际上可以使用纯 CSS。

div {
    background: #f0a;
    display: none;
    height: 200px;
    width: 200px; }

input:focus + div { display: block; }

我本质上所做的是，首先隐藏div，当输入字段具有焦点时，紧邻的下一个兄弟匹配div将其display模式更改为block.

为此，它必须是紧邻的下一个兄弟，因为您无法沿 DOM 树向上移动，因此您需要打开input字段。从span.

看我的小提琴：http: //jsfiddle.net/TheNix/U28sd/

编辑：
“相邻选择器”（+）应该在 IE7 及更高版本中工作（尽管我认为异步加载的内容可能存在一些问题）。请注意，该元素必须紧随其后，因此它不是“匹配 Y 的下一个元素”，而是实际上“紧随 X 的元素，如果它匹配 Y”。

有时，如果你知道标记并且你喜欢破解，你可以“数数”你的方式。input + div + div例如，将针对第二个div（如果标记完全匹配）。当然，我不会推荐它，因为它会在你的标记发生最轻微的变化时爆炸，并且维护起来会很痛苦。

在此处阅读有关选择器的更多信息：http: //www.w3.org/TR/CSS2/selector.html#adjacent-selectors

于 2012-11-09T20:57:00.930 回答
1

如果您使用的是 jQuery（如果您刚开始使用 JS，我强烈建议您使用 jQuery）

$(':text').focus(function(e){
    $('.list_search').toggle();
}).blur(function(e){
    $('.list_search').toggle();
});
于 2012-11-09T20:50:55.387 回答