jquery扩展<；李>；左右倒下

试图使菜单

li

项向右展开，在

单击

事件上显示搜索表单，然后在单击搜索表单本身之外的任何内容时再次关闭。我已经设法让扩展工作，但无法找出崩溃。我知道关于这件事已经有很多问题了，但我觉得我太累了，弄不懂它的意思。。。谢谢你的帮助

UDPATE:

设法通过

mouseleave（）

事件获得效果：

但还是出于好奇，我不能让它以某种形式的点击事件崩溃

HTML:

CSS:

试试这个：

$("#search").click(function() {
    $(this).animate({width:'225px'},200).css("background-color","#e5e6e7");
    $("#searchA").animate({width:'180px'},200).css({'background-image':'url(images/nav-searchgrey.png)','color':'#4d4d4d'});
    $('#searchWrap').show("slide", 200);
    $("#search input").css({'background-color':'#fff','border-color':'#BBBDBF'});

    $('body :not(#searchWrap)').one(function() {
      // Hide search.
    });
});

---

“模糊”是当用户“取消聚焦”当前聚焦的字段时发送的事件。您可以使用jQuery中的blur方法直接侦听该事件，如下所示：

$('#searchWarp input:first').blur(function(event) {
    // reverse the actions that you made on the 'mouseup' event handler
}

---

祝你好运

使用HTML单击来检测搜索之外的单击

$('html').click(function() {
   //Change the CSS here to hide
});

不要忘记包含事件。stopPropagation（）

就你而言

$("#search").mouseup(function(event) {
    $(this).animate({width:'225px'},200).css("background-color","#e5e6e7");
    $("#searchA").animate({width:'180px'},200).css({'background-image':'url(images/nav-searchgrey.png)','color':'#4d4d4d'});
    $('#searchWrap').show("slide", 200);
    $("#search input").css({'background-color':'#fff','border-color':'#BBBDBF'});
    event.stopPropagation();
 });

---

哇，这只能运行一次——为什么要使用

one（）

？因为每次单击

#搜索
，都会附加
.one（）
，并且不会不必要地触发。啊，这很有意义……很好！问题可能是您的jQuery版本。您正在使用
1.4
。jQuery
1.7.1
几周前就推出了。试过了，还是不行？你介意看看这把小提琴吗？将单击附加到整个
html
标记包括搜索本身。这就是为什么我们必须使用event.stoppropogation（），因此在搜索中它将忽略html单击事件。但是当您单击搜索本身时，它将触发
stoppropogation（）
。另外，您忘了将
事件
参数添加到搜索鼠标的功能中——否则，
事件.stopPropagation（）
将不起作用。
$('#searchWarp input:first').blur(function(event) {
    // reverse the actions that you made on the 'mouseup' event handler
}

$('html').click(function() {
   //Change the CSS here to hide
});

$("#search").mouseup(function(event) {
    $(this).animate({width:'225px'},200).css("background-color","#e5e6e7");
    $("#searchA").animate({width:'180px'},200).css({'background-image':'url(images/nav-searchgrey.png)','color':'#4d4d4d'});
    $('#searchWrap').show("slide", 200);
    $("#search input").css({'background-color':'#fff','border-color':'#BBBDBF'});
    event.stopPropagation();
 });