如果单击父菜单，JavaScript无法显示子菜单

JavaScript not working to show submenu if parent have been clicked

本文关键字：菜单 显示 单击 如果 JavaScript      更新时间：2023-09-26

我发现这个jQuery显示子菜单，如果父已被点击，但当我试图将其合并到我的预制作的HTML页面，代码似乎不工作在某种意义上，它立即显示子菜单，它不切换隐藏子菜单，我试图创建一个单独的JSP文件，并将其链接到我的主HTML页面，但它不工作

<script src="test.js"></script>

所以我只是把下面的脚本添加到我的HTML页面，它不工作，以及

<script>
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
</script>

我不是很精通JS编码，所以我需要一些指导，我如何才能正确地合并代码，下面是我的代码，我已经添加了代码，我试图使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
$(document).ready(function(){
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
});
</script>
    </head>
    <body class="oneColFixCtrHdr">
    <div id="container">
    <div id="header" style="background-color:#7BD12E">
    <h1 align="Left" style="color:#FFF; font-size: 18px;"><strong>Test</strong></h1>
      <!-- end #header --></div>
    <div id="mainContent">
        <ul>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a>
            <ul class="sub-menu">
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a>
            <ul class="sub-menu">
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
        <!-- end #mainContent -->
    </div>
    <div id="footer" style="background-color:#7BD12E">
    <p style="color:#FFF">Test</p>
    <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>

您需要将jquery包装在$(document).ready():

$( document ).ready(function() {
    $('.sub-menu').hide();
    $("li:has(ul)").click(function(){
        $("ul",this).toggle('slow');
    }); 
})

我也会把它移到结束的</body>标签之前

和根据BrettL的注释，您需要添加jquery库

相关文章：