更改悬停的div的内容，jQuery

我有一个菜单<li>，当徘徊幻灯片包含子菜单的面板。（固定）现在我需要填写与变化取决于该菜单项盘旋内容的子菜单（固定）更改悬停的div的内容，jQuery

最后一个问题：我只能让内容改变发生，如果。点击使用而不是.hover ... - 在同一个元素上使用2个.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>

来源

2009-10-15 OndeFar

多个.hover（）工作正常：http://jsfiddle.net/PEBhS/ – Playmaker 2012-06-11 12:55:00

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

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

当完成后，更新与新的HTML代码，你的问题代替<div id="subcontent_container"> ，我会在接下来的步骤说明更新我的答案。

来源

2009-10-15 11:02:35 pixeline

sry男人，打字速度比我的脑子能跟得上:) – OndeFar 2009-10-15 11:47:13

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

这也是比较好的做法是嵌套的L1标签为嵌套列表内的第二级资产净值，这将使鼠标悬停状态结转到悬停在新显示面板的代码（因为它是一个孩子在李的，所以你在技术上还“的onmouseover”含Li块的，这将不幸需要一些CSS改型和绝对定位的嵌套的UL，但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'); 
});

来源

2009-10-15 12:40:22

我使用.hover事件，当你的格式将需要这样做相信：

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

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

使用这种格式，你应该能够在你的职责，堵塞并获得悬停上下工夫悬停和翱翔。我会密切关注这篇文章，看看是否有其他问题出现。我希望这有帮助。

来源

2009-10-15 13:15:54 Slevin

更改悬停的div的内容，jQuery

回答

相关问题