在悬停时更改 div 的内容，jQuery答案

【问题标题】：change content of div on hover, jQuery在悬停时更改 div 的内容，jQuery
【发布时间】：2009-10-15 10:10:56
【问题描述】：

我有一个菜单<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>

【问题讨论】：

多个 .hover() 工作正常：jsfiddle.net/PEBhS

标签： javascript jquery html menu hover

【解决方案1】：

首先，通过正确使用 id 和类来更正您的 html 标记。

Id 是唯一标识符，它们不能在同一个 html 文档中多次使用。为此使用 class 属性。到目前为止，替换<div id="subcontent_container"> <div class="subcontent_container">

完成后，使用新的 html 代码更新您的问题，我将使用下一步的说明更新我的答案。

【讨论】：

sry 伙计，打字速度快得我的大脑跟不上 :)

【解决方案2】：

使用 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();
    });
});

将二级导航作为嵌套列表嵌套在 LI 标记中通常也是一种好习惯，这将使鼠标悬停状态继续悬停在新显示的面板代码上（因为它是 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>

它还有一个额外的好处是可以简化你的 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】：

我相信在使用 .hover 事件时，您的格式需要像这样完成：

function border() {
$('ELEMENT').hover(function () {
        $(this).stop().animate({height:"290"},200) },

function () {
        $(this).stop().animate({height:"150"},200)
     });
};

使用这种格式，您应该能够插入您的函数并使悬停在悬停和悬停上工作。我会密切关注这篇文章，看看是否还有其他问题。我希望这会有所帮助。

【讨论】：