1

これはおそらく本当に簡単ですが、私は私の人生の答えを見ることができません。

「検索」という単語をクリックすると、検索フォームが表示に切り替わり、離れるようになります。

HTML：

<div id="mainsearchlink">
    <a id="mainsearchlinka" href="#">Search</a>
    <div id="mainsearch">
        <form role="search" method="get" id="searchform" action="">
             <div>
                 <label class="screen-reader-text" for="s">Search for:</label>
                 <input type="text" value="" name="s" id="s" />
                 <input type="submit" id="searchsubmit" value="Search" />
             </div>
         </form>
     </div>
</div>

JS：

$('#mainsearchlink').click(function (event) {
    event.preventDefault();
    $(this).find('div#mainsearch').fadeToggle(400);
});

CSS：

#mainsearch {
    display: none;
}

ただし、フェードインとフェードアウトは問題なく機能しますが、入力ボックスにカーソルを置くと、フェードアウトします。

ご協力いただきありがとうございます！

4

3 に答える 3

3 
$('#mainsearchlink')

する必要があります

$('#mainsearchlinka')

この変更を行う必要がある理由は、イベントのバブリングが原因です。テキストボックスをクリックすると、クリックイベントがdivに表示されます。

ただし、その変更に伴い、セレクターを変更する必要があります。それで：

$('#mainsearchlinka').click(function (event) {
    $('#mainsearch').fadeToggle(400);
});

フィドル： http： //jsfiddle.net/wPQDM/1

編集：FrançoisWahlのコメントを組み込むため。

于 2013-03-06T14:44:24.973 に答える
1 
$('#mainsearchlink').click(function (event) {
    $(this).find('div#mainsearch').fadeToggle(400);
});

$('#s').on('click', function (event) {
    return false;
});
于 2013-03-06T14:47:51.910 に答える
-1 
$('#mainsearchlink').click(function (event) {
    event.preventDefault();
    $(this).find('div#mainsearch').fadeToggle(400);
});

上記のスクリプトで次のように変更#mainsearchlink します#mainsearchlinka

于 2013-03-06T14:45:08.377 に答える