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

Question

I've found this jQuery show submenu if parent have been clicked but when I tried to incorporate it to my pre-made HTML page, the code does not seem to worked in a sense that it shows the submenu right away and it does not toggle to hide the sub menus, I have tried to create a separate JSP file and link it to my main HTML page but it does not work 我已经找到了如果单击了parent的情况，就会发现此jQuery show子菜单，但是当我尝试将其合并到我的预制HTML页面中时，该代码似乎在某种程度上无法立即显示该子菜单并且不会切换，因此似乎无法正常工作隐藏子菜单，我试图创建一个单独的JSP文件并将其链接到我的主HTML页面，但是它不起作用

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

so I just added this script below to my HTML page, which does not work as well 所以我只是将下面的脚本添加到我的HTML页面中，但效果不佳

<script>
$('.sub-menu').hide();

$("li:has(ul)").click(function(){

$("ul",this).toggle('slow');
});
</script>

I am not well versed with JS coding so I would need some guidance on how I can incorporate the codes properly, below is my code where I have added the code that I'm trying to use 我不太熟悉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>

Answer 1

you need to wrap the jquery in a $(document).ready() : 您需要将jquery包装在$(document).ready() ：

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

and i would move it to just before your closing </body> tag as well 而且我也会将其移动到</body>标记之前

and as per BrettL's comments, you need to add the jquery library 并根据BrettL的评论，您需要添加jquery库

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-05-07 15:15:29

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-05-07 15:15:29

解决方案1
3 已采纳 2014-05-07 15:15:29