使用jQuery创建一个弹出式消息onClick点击使用jQuery

Question

所以我想要点击“搜索”时，页面顶部会出现一个小条，其中包含搜索表单和一个关闭按钮。单击栏到关闭按钮将弹出窗口滑回页面上方。他的代码如下，但我的问题是“我怎么能做得更好？它目前看起来非常混乱！有没有一种方法不使用隐藏的div在页面上，并让它创建时，该功能是在点击？”

所以它与触发JavaScript函数自上而下的搜索栏锚开始：

<a onClick="toggleSearch()">Search</a> 

function toggleSearch() { 
    $('#searchoverflow').slideToggle('fast') 
}; 

它切换上下一个隐藏的div，#searchoverflow（这是我想摆脱什么的）。

<div class="notification" id="searchoverflow"> 
    <a href="javascript:" onClick="toggleSearch()" style="width:100%; position:absolute;height:50px;"></a> 
    <div style="width:0px"><form style="width:200px" role="search" method="get" id="searchform" action="http://thenozzle.net/"><input type="text" value="" name="s" id="s"><input style="left:5px" type="submit" id="searchsubmit" value="Search"></form></div> 
    <a href="javascript:" class="notificationclose" onClick="toggleSearch()">CLOSE</a> 
</div><!-- searchoverflow --> 

他弹出div解释：通知类只是它的样式，它是不相关的。搜索溢出的ID是我在javascript函数中使用的，因为我在页面上有其他通知，并且需要使这个特定。弹出窗口中的第一个锚点是我用来使搜索栏在点击其正文时消失的内容。在那之下，另一个锚点就是人们没有意识到整个事物会使人隐藏的情况。中间div只有搜索表单。

在此先感谢！

tl; dr我试图以任何可能的方式简化上述代码，使其更加语义化，不那么杂乱，除非必要，我不必在html中使用隐藏的弹出式div。

Answer 1

我会回答说这正是你想要做的。

我认为你的代码是非常有语义的。 div#searchOverflow可能会被重命名为div#searchbox，并且我会让点击事件以编程方式被绑定，但div绝对应该在DOM中。

编辑，您的问题：

我来自的见解是模型 - 视图 - 控制从设计模式的概念[1]。在Web开发中，HTML是模型。这是你正在使用的东西，页面的物理部分。 CSS是视图。 CSS描述了您希望 默认显示的模型 - 块，颜色，字体和内容。 Javascript是控制器。它是基于用户与网页的交互操作模型和视图的程序代码。

我们在不同的文件中分离这些关注点，以便快速改变我们希望每个部分的工作方式。通过将所有的HTML都放在一个文件中，我们不需要寻找更多的代码来试图找到你需要编辑的东西。假设您想要更改表单的目标，因为您已在后端添加了新的搜索模块。从未查看过代码的人会从哪里看到.htm或.js文件？我会查看.htm文件，因为这是表单标记应该是（在我的脑海里）。

然后，我会将onclick绑定移动到JS。目前，你有他们在与onclick="toggleSearch()"的HTML。同样的原因 - 如果我是新手来查看代码，我会首先查看JS的任何编程事物。至于如何做到这一点：

$(function(){ 
    $("#searchoverflow > a").click(
     toggleSearch 
    ); //'#searchoverflow > a' click handler 
}); //doc ready 

包装$(function(){})是一个文档准备handler-它只会被调用一次在页面上一切准备就绪。 $("#searchoverflow > a")只选择a是包含div的直接子节点。 .click(_function_)绑定点击事件，以便当匹配该选择器的任何内容被点击时，函数得到运行。

[1] http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller