尝试将菜单li
项向右展开,在click
事件上显示搜索表单,然后在点击搜索表单以外的任何内容时再次关闭。我已经设法让扩展工作,但无法弄清楚崩溃。我知道已经有很多关于这方面的问题,但我认为我太累了,无法理解它......任何帮助都会受到赞赏。
UDPATE:
通过mouseleave()
事件管理以获得效果:http://jsfiddle.net/C3YCP/31/
但仍然出于好奇,我不能通过某种点击事件让它崩溃?
HTML:
<li id="search">
<a href="#" title="Search" id="searchA">Search</a>
<div id="searchWrap">
<form>
<fieldset>
<input type="text">
</fieldset>
</form>
</div>
</li>
JS:
$("#search").click (function() {
$(this).animate({width:'225px'},200).css("background-color","#e5e6e7");
$("#searchA").animate({width:'180px'},200)','color':'#4d4d4d'});
$('#searchWrap').show("slide", 200);
$("#search input").css({'background-color':'#fff'});
});
$("#searchWrap").click(function() {
return false;
});
CSS:
#search { width: 112px; }
#searchA { color: #fff; padding: 18px 35px 53px 9px; }
#searchWrap { position: absolute; top: 53px; left: 10px; display: none; }
#search form { padding: 0 10px 0 0; }
#search fieldset { border: none; }
#search input { width: 200px; height: 20px; border: 1px solid #fff; background-color:#4D4D4D; outline: none; color: #4D4D4D; padding: 0 0 0 3px;}
答案 0 :(得分:1)
试试这个:
$("#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.
});
});
答案 1 :(得分:0)
'blur'是当用户“聚焦”当前聚焦的字段时调度的事件。您可以使用jQuery中的blur方法直接监听该事件:
$('#searchWarp input:first').blur(function(event) {
// reverse the actions that you made on the 'mouseup' event handler
}
祝你好运!
答案 2 :(得分:0)
使用HTML点击检测搜索之外的点击
$('html').click(function() {
//Change the CSS here to hide
});
并且不要忘记包含 event.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();
});