升级jQuery会破坏弹出子菜单

时间:2018-04-24 17:17:16

标签: javascript jquery

我有代码在每个菜单项悬停时显示带弹出子菜单的菜单。

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>

此代码使用jquery-1.6.1.min.js,但是当我升级到jquery-1.12.4.min.js时,弹出功能会中断。在页面加载时,第一个菜单项(Home)的子菜单已经扩展。将鼠标悬停在其上或其他菜单项上不会导致所显示的内容发生变化。

我发现jQuery 3.0中已弃用bind()操作,但它应该仍适用于1.12.4,不应该吗?我无法找到任何已弃用的children()hide()show()的记录。

对于上下文,我对jQuery和JavaScript知之甚少。出现这个问题是因为我必须修复别人的代码。

1 个答案:

答案 0 :(得分:1)

您是否尝试过将.bind更改为$(".selector").on("mouseover", function () {..});

相关问题