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変更することです。displayblock

これが機能するには、DOM ツリーを上に移動できないため、すぐ隣の兄弟である必要があるため、inputフィールドをアンラップする必要があります。からspan。

私のフィドルを参照してください: http://jsfiddle.net/TheNix/U28sd/

編集:
「隣接セレクター」( +) は IE7 以降で動作するはずです (ただし、非同期に読み込まれたコンテンツには問題があると思います)。要素は直後に来る必要があるため、「Y に一致する次の要素」ではなく、実際には「Y に一致する場合、X の直後の要素」であることに注意してください。

場合によっては、マークアップを知っていて、ハッキングするのが好きな場合は、「カウントダウン」することができます。たとえばinput + div + div、2 番目の をターゲットにします (マークアップが完全に一致する場合)。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 に答える