Javascript 更改悬停时div的内容，jQuery_Javascript_Jquery_Html_Menu_Hover

Javascript 更改悬停时div的内容，jQuery

javascript jquery html menu

Javascript 更改悬停时div的内容，jQuery,javascript,jquery,html,menu,hover,Javascript,Jquery,Html,Menu,Hover,我有一个菜单，当鼠标悬停时，它会向下滑动一个包含子菜单的面板。（固定）现在，我需要用内容填充子菜单，这些内容根据悬停的菜单项的不同而变化最后一个问题：我只能在以下情况下更改内容：使用.click而不是.hover。。。 -在同一元素上使用2x.hover是否存在问题 <html> [.......] <body> <div id="head_menu"> <div id="navmain"> <ul

我有一个菜单

，当鼠标悬停时，它会向下滑动一个包含子菜单的面板。（固定）现在，我需要用内容填充子菜单，这些内容根据悬停的菜单项的不同而变化

最后一个问题：我只能在以下情况下更改内容：使用.click而不是.hover。。。 -在同一元素上使用2x.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>


[.......]




头
内容
更多内容
头
内容
更多内容
var slideOpen=false；
变量切换=错误；
函数slidein（）{
清除超时（切换）；
如果（！slideOpen）
$（“面板”）。向下滑动（“快速”）；
其他的
$（“#面板”）.show（）；
slideOpen=true；
$（此）.addClass（“活动”）；
返回false；
}
函数滑出（）{
如果（！slideOpen）
$（“#面板”）.hide（）；
其他的
$（“面板”）.slideUp（“快速”）；
slideOpen=false；
$（此）.removeClass（“活动”）；
返回false；
}
函数unhover（）{
清除超时（切换）；
切换=设置超时（滑出，300）；
}
$（“.open”）。悬停（幻灯片输入，取消悬停）；
$（函数（）{
$（“#navmain li”）。单击（函数（）{
var$this=$（this）；
$（“#subcontent_wrap div”）.hide（）；
$（“#子菜单”+$this.attr（“id”）.replace（/menu/，“”）.show（）；
$（“#navmain li”）.css（“字体重量”、“正常”）；
$this.css（“字体重量”、“粗体”）；
});
});

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

Id是唯一标识符，不能在同一html文档中多次使用。为此使用class属性。到目前为止，请替换

通过

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

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

Id是唯一标识符，不能在同一html文档中多次使用。为此使用class属性。到目前为止，请替换

通过

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

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

通常，将二级nav嵌套在LI标记中作为嵌套列表也是一种良好的做法，这将使鼠标悬停状态能够延续到新显示的面板代码上（因为它是LI的子项，所以从技术上讲，您仍然是“onmouseover”不幸的是，这需要在嵌套的UL上进行一些CSS重新排序和绝对定位，但在我看来这是值得的

<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>

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

<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>

我相信在使用.hover事件时，您的格式设置需要如下所示：

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

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

使用此格式，您应该能够插入函数并使鼠标悬停在hoverin和hoverout上运行。我将关注此帖子，以查看是否出现任何其他问题。我希望这会有所帮助。

我相信在使用.hover事件时，您的格式设置需要如下所示：

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

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

使用这种格式，你应该能够插入你的函数，让鼠标悬停在鼠标悬停和鼠标悬停上。我会关注这篇文章，看看是否还有其他问题出现。我希望这会有所帮助。

sry man，打字速度比我的大脑快：）sry man，打字速度比我的大脑快：）Multiple.hover（）工作正常：Multiple.hover（）工作正常：