更改jQuery悬停时div的内容
[英]change content of div on hover, jQuery
问题描述
I have a menu <li> that when hovered slides a panel down which contains a submenu. 
我有一个菜单<li> ，当鼠标悬停时，它会将包含子菜单的面板向下滑动。 (fixed) Now I need to fill that submenu with content that changes depending on which of the menu items is hovered.(fixed) （已修复）现在我需要在子菜单中填充随鼠标悬停的菜单项而变化的内容。
last problem: I can only make the content-change happen if .click is used instead of .hover ... - is there an issue using 2 x .hover on same element? 最后一个问题：如果仅使用.click而不是.hover，则只能进行内容更改...-在同一元素上使用2 x .hover是否存在问题？
<html>
[.......]
<body>
<div id="head_menu">
<div id="navmain">
<ul>
<li id="menu1"><a class="open" href="#">Menu 1</a></li>
<li id="menu2"><a class="open" href="#">Menu 2</a></li>
</ul>
</div>
</div>
<div id="toppanel">
<div id="panel">
<div id="subcontent_wrap">
<div id="submenu1" style="display:none;">
<div class="subcontent_container">
<h1>Head</h1>
<p>content </p>
</div>
<div class="subcontent_container">more content</div>
</div>
<div id="submenu2" style="display:none;">
<div class="subcontent_container">
<h1>Head</h1>
<p>content </p>
</div>
<div class="subcontent_container">more content</div>
</div>
</div>
</div>
<script>
var slideOpen = false;
var toggling = false;
function slidein() {
clearTimeout(toggling);
if (!slideOpen)
$("#panel").slideDown("fast");
else
$("#panel").show();
slideOpen = true;
$(this).addClass("active");
return false;
}
function slideout() {
if (!slideOpen)
$("#panel").hide();
else
$("#panel").slideUp("fast");
slideOpen = false;
$(this).removeClass("active");
return false;
}
function unhover() {
clearTimeout(toggling);
toggling = setTimeout(slideout, 300);
}
$(".open").hover(slidein, unhover);
$(function () {
$("#navmain li").click(function () {
var $this = $(this);
$("#subcontent_wrap div").hide();
$("#submenu" + $this.attr("id").replace(/menu/, "")).show();
$("#navmain li").css("font-weight", "normal");
$this.css("font-weight", "bold");
});
});
</script>
</body>
</html>
3 个解决方案
解决方案1
1 2009-10-15 11:02:35
First, correct your html markup, by using id and classes correctly. 首先，通过正确使用id和class来更正html标记。
Id are unique identifiers, they cannot be used more than once in the same html document. id是唯一标识符，在同一html文档中不能多次使用它们。 Use the class attribute for that. 为此使用class属性。 So far instance, replace <div id="subcontent_container"> by <div class="subcontent_container"> 到目前为止，将<div id="subcontent_container">替换为<div class="subcontent_container">
When that is done, update your question with the new html code, i'll update my answer with instructions on the next step. 完成此操作后，请使用新的html代码更新您的问题，我将通过下一步的说明来更新我的答案。
解决方案2
1 2009-10-15 12:40:22
You would be better off with onmouseover/onmouseout as you have a callback state to hide the menu when the user is no longer hovering the LI. 您最好使用onmouseover / onmouseout，因为当用户不再悬停LI时，您可以通过回调状态隐藏菜单。
// this will only work for hover
// you will need a separate binding on the A tag to make
// the panel stick
$('#navmain li').mouseover(function() {
var id = $(this).attr('id');
var subId = 'sub' + id;
// show the sub menu
$(subId).fadeIn(1, function() {
// slide down top panel
$('#toppanel').slideDown('fast');
});
},
// this callback refers to the onmouseout state
function() {
// hide the top panel
$('#toppanel').slideUp('fast', function() {
// hide content again
$(subId).hide();
});
});
It's also generally good practice to nest your second level nav inside your LI tag as a nested list, this would enable the mouseover state to carry over to hovering over the newly shown panel code (as it is a child of the LI, so you are still technically "onmouseover" of the containing LI block. This would unfortunately take some CSS restyling and absolute positioning on the nested UL, but IMO it would be worth the effort. 通常，将第二级导航作为嵌套列表嵌套在LI标记中也是一种很好的做法，这将使mouseover状态可以悬停在新显示的面板代码上（因为它是LI的子代，所以仍然在技术上是对包含的LI块的“ onmouseover”操作，不幸的是，这需要对嵌套的UL进行一些CSS重塑和绝对定位，但是IMO值得付出努力。
<div id="head_menu">
<div id="navmain">
<ul>
<li id="menu1">
<a class="open" href="#">Menu 1</a>
<ul style="display:none">
<li>
<div id="submenu1" style="display:none;">
<div class="subcontent_container">
<h1>Head</h1>
<p>content </p>
</div>
<div class="subcontent_container">more content</div>
</div>
</li>
</ul>
</li>
<li id="menu2">
<a class="open" href="#">Menu 2</a>
<ul style="display:none">
<li>
<div id="submenu2" style="display:none;">
<div class="subcontent_container">
<h1>Head</h1>
<p>content </p>
</div>
<div class="subcontent_container">more content</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
It has the added benefit of simplifying your jQuery and reducing some unnecessary tags. 它具有简化jQuery并减少一些不必要标签的附加好处。
// this version coupled with the above HTML changes
// will allow the UL panel to remain open until
// you mouse out
$('#navmain li').mouseover(function() {
$(this).find('ul').slideDown('fast');
},
// this callback refers to the onmouseout state
function() {
$(this).find('ul').slideUp('fast');
});
解决方案3
1 2009-10-15 13:15:54
I believe when using the .hover event your formatting would need to be done like this: 我相信，在使用.hover事件时，您需要像这样进行格式化：
function border() {
$('ELEMENT').hover(function () {
$(this).stop().animate({height:"290"},200) },
function () {
$(this).stop().animate({height:"150"},200)
});
};
Using this format you should be able to plug in your functions and get the hovers to work on hoverin and hoverout. 使用这种格式，您应该能够插入您的函数，并使悬停器在hoverin和hoverout上工作。 I will keep an eye on this post to see if any other questions arise. 我将密切关注这篇文章，看看是否还有其他问题。 I hope this helps. 我希望这有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.