Question

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

Answer 1

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

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

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

Answer 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的子代，所以你在技术上仍然是“onmouseover”包含LI块。不幸的是，这会在嵌套的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');
});

Answer 3

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

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

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

使用这种格式，你应该能够插入你的功能并让悬停在hoverin和hoverout上工作。我会留意这篇文章，看看是否还有其他问题。我希望这会有所帮助。

在hover，jQuery上更改div的内容

3 个答案: