我有一个jQuery代码，它正在运行，因为我希望它可以工作到某一点。 Here是小提琴
三个菜单项，当悬停在上面时，黄色方框中会出现黑色方块和其他信息。 点击菜单1＆amp; 3，菜单前出现绿色圆圈。 单击菜单2时，也会出现一个搜索栏，并在稍微延迟时进入焦点。
在此之前一切都很好。
我想要的是，例如：
- 点击'menu_item'_2后，我将鼠标移到另一个项目上，必须显示黄色字段'info_2'。
所以我应该在点击完成后以某种方式丢弃悬停。 当我点击另一个menu_item时，它应该在黄色框中显示相应的信息。
我不是jQuery的专家，所以也许代码必须以其他方式完成。
无论如何，谢谢你的帮助！
$(function() {
$("#search").hover(
function() {
$("#search_info").show();
$("#arrow").show().css('top', 230);
$("#fade_search").animate({ opacity: 0.4},50);
},
function() {
$("#arrow, #search_info").hide();
$("#fade_search").animate({ opacity: 1},50);
}).click(function(e) {
$("#activated").show().css('top', 232);
var focusDelay = $("input[type=text]").fadeIn(100);
setTimeout(function(){
$(focusDelay).focus();
},1000);
e.preventDefault();
});
$("#list").hover(
function() {
$("#list_info").show();
$("#arrow").show().css('top', 205);
$("#fade_list").animate({ opacity: 0.4},50);
},
function() {
$("#arrow, #list_info").hide();
$("#fade_list").animate({ opacity: 1},50);
}).click(function(e) { show up
$("#activated").show().css('top', 209 );
e.preventDefault();
});
$("#program").hover(
function() {
$("#program_info").show();
$("#arrow").show().css('top', 255);
$("#fade_program").animate({ opacity: 0.4},50);
},
function() {
$("#arrow, #program_info").hide();
$("#fade_program").animate({ opacity: 1},50);
}).click(function(e) {
$("#activated").show().css('top', 261 );
e.preventDefault();
});
});
答案 0 :(得分：2)
我已经改变了你的整个jQuery代码。请参阅此jsFiddle进行返工：http://jsfiddle.net/jUHNF/8/
注意：我假设您只想显示菜单项2的搜索框，如果不是这样，请删除以下内容：
else {
$("input[type=text]").hide();
}
代码本身应该得到很好的评论（可能有点太好了）。
正如您所看到的，我已将所有功能移动到一个悬停/点击事件，而不是根据您单击的菜单项将它们分成单独的事件。这里的想法是保持清洁和简单。
如果您想对菜单点击进行进一步更改（例如，使当前点击的项目斜体），该怎么办？然后你需要在三个地方进行更改，每个菜单事件一次。如果添加新的菜单项，则需要再次复制代码......依此类推。通过确保您的大多数逻辑可以在同一事件下进行，您不必像这样重复代码（不要重复自己！）
修改：粘贴jsFiddle代码以供将来参考。
<div id="container">
<div id="modes">
<div class="elements" id="list">
<a href="">menu_item_1</a>
</div>
<div class="elements" id="search">
<a class="link" href="">menu_item_2</a>
</div>
<div class="elements" id="program">
<a href="">menu_item_3</a>
</div>
</div>
<div id="infobox">
<p id="list_info" class="infobox">
info_1
</p>
<p id="search_info"class="infobox">
info_2
</p>
<p id="program_info"class="infobox">
info_3
</p>
<form method="post" action=""></form>
<input type="text" name="search_field"
placeholder="type here" />
</form>
</div>
<div id="arrow"></div>
<div id="activated"></div>
</div>
JS：
$(function() {
$(".elements").mouseover(
function() {
activateMenuItem($(this));
}
).click(function(e) {
var bulletTop = $(this).position().top + 207;
$("#activated").show().css("top", bulletTop);
//turn off the hover function for all menu items
$(".elements").off("hover");
if($(this).attr("id") == "search") {
var focusDelay = $("input[type=text]").fadeIn(100);
setTimeout(function(){
$(focusDelay).focus();
},1000);
}else {
$("input[type=text]").hide();
}
activateMenuItem($(this)); //do same as on hover
e.preventDefault();
});
function activateMenuItem(item) {
var arrowTop = item.position().top + 205;
var boxName = "#" + item.attr("id") + "_info";
$("#arrow").show().css("top", arrowTop);
$(".infobox").hide();
$(boxName).show();
}
});
答案 1 :(得分：0)
试试这个：
$(function() {
$("#search").hover( //hover over search triggers info and arrow to show up
function() {
$("#search_info").show();
$("#arrow").show().css('top', 230);
$("#fade_search").animate({
opacity: 0.4
},
50);
},
function() {
if (!$(this).hasClass('activated')) {
$("#arrow, #search_info").hide();
}
$("#fade_search").animate({
opacity: 1
},
50);
}).click(function(e) { //click on search triggers search box and activated button to show up
$('.elements').removeClass('activated');
$(this).addClass('activated');
$("#activated").show().css('top', 232);
var focusDelay = $("input[type=text]").fadeIn(100);
setTimeout(function() {
$(focusDelay).focus();
},
1000);
e.preventDefault();
});
$("#list").hover( //hover over list triggers info and arrow to show up
function() {
$("#list_info").show();
$("#arrow").show().css('top', 205);
$("#fade_list").animate({
opacity: 0.4
},
50);
},
function() {
if (!$(this).hasClass('activated')) {
$("#arrow, #list_info").hide();
}
$("#fade_list").animate({
opacity: 1
},
50);
}).click(function(e) { //click on list triggers search box and activated button to show up
$('.elements').removeClass('activated');
$(this).addClass('activated');
$("#activated").show().css('top', 209);
e.preventDefault();
});
$("#program").hover( //hover over program triggers info and arrow to show up
function() {
$("#program_info").show();
$("#arrow").show().css('top', 255);
$("#fade_program").animate({
opacity: 0.4
},
50);
},
function() {
if (!$(this).hasClass('activated')) {
$("#arrow, #program_info").hide();
}
$("#fade_program").animate({
opacity: 1
},
50);
}).click(function(e) {
$('.elements').removeClass('activated');
$(this).addClass('activated');
$("#activated").show().css('top', 261);
e.preventDefault();
});
});
$('.elements').click(function(e) {
if ($(this).hasClass('activated')) {
var i = $(e.currentTarget).index();
$('#infobox p').hide();
$('#arrow, #infobox p:eq(' + i + ')').show();
}
});
答案 2 :(得分：0)