Reputation: 501
I have code to display a menu with pop-out submenus when each menu item is hovered over.
jQuery:
<script type="text/javascript">
$(document).ready(function() {
var hoverAttributes = {
speed: 10,
delay: 100
};
$("#nav-home").bind("hover", hoverAttributes, function(){
$("#subnav").children().hide();
$("#sub-home").show();
});
$("#nav-library").bind("hover", hoverAttributes, function(){
$("#subnav").children().hide();
$("#sub-library").show();
});
});
</script>
HTML:
<div id="nav">
<table align="right">
<tr>
<td id="menu">
<ul>
<li><a href="../home" id="nav-home">Home</a></li>
<li><a href="../library" id="nav-library">Library</a></li>
</ul>
</td>
</tr>
<tr>
<td id="subnav">
<ul id="sub-home">
<li><a href="../home/forum.jsp">Forums</a></li>
<li><a href="../home/news.jsp">News</a></li>
<li><a href="../home/about.jsp">About Us</a></li>
</ul>
<ul id="sub-library">
<li><a href="../library/resources.jsp">Resources</a></li>
<li><a href="../library/glossary.jsp">Glossary</a></li>
<li><a href="../library/references.jsp">References</a></li>
</ul>
</td>
</tr>
</table>
</div>
This code works using jquery-1.6.1.min.js, but when I upgrade to jquery-1.12.4.min.js, the pop-out functionality breaks. On page load, the first menu item (Home) has its submenu already expanded. Mousing over it or other menu items causes no change in what's displayed.
I've found that the bind()
action was deprecated in jQuery 3.0, but it should still work for 1.12.4, shouldn't it? I can't find any record of children()
, hide()
or show()
being deprecated.
For context, I know very little about jQuery and JavaScript. This came up because I have to fix someone else's code.
Upvotes: 1
Views: 24
Reputation: 1524
Have you tried changing .bind to $(".selector").on("mouseover", function () {..});
Upvotes: 1