我有一个菜单<li>
,当悬停时会向下滑动一个包含子菜单的面板。(已修复)现在我需要使用根据悬停的菜单项而变化的内容填充该子菜单。(已修复)
最后一个问题:如果使用 .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>