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

jQuery消失div

3 个答案: