jQuery 消失的 div

Question

这可能非常简单，但我一生都找不到答案。

我希望当我单击“搜索”一词时，搜索表单会切换到 View 并离开。

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;
}

但是，淡入和淡出效果很好，但是当我将光标放在输入框中时，它就消失了。

感谢您的帮助!

Answer 1

$('#mainsearchlink')

应该是

$('#mainsearchlinka')

您需要进行此更改的原因是因为事件冒泡。当您单击文本框时，单击事件会冒泡到您的 div。

但是，随着这一更改，您将需要更改选择器。所以:

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

fiddle : http://jsfiddle.net/wPQDM/1

已编辑:纳入 FrançoisWahl 的评论。