jquery - jQuery消失的div

Question

这可能真的很简单，但我看不到我一生的答案。

当我单击“搜索”一词时，我希望搜索表单切换到视图并关闭。

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

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

编辑：合并 FrançoisWahl 的评论。

Answer 2

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

$('#s').on('click', function (event) {
    return false;
});

Answer 3

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

在上面的脚本中更改#mainsearchlink 为#mainsearchlinka