我是Web开发的新手,我想在我的简单html页面中添加以下功能,但是如果我按“单击我”,则不会发生任何事情。说明部分不会隐藏和显示

This is the code I tried

我添加了以下代码。 CSS运行良好。但是JavaScript不起作用。我该如何解决这个问题

<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="hpcss.css">
<script>
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});
</script>


</head>
<body align="center">
<a href="#" class="clickme">Click Me</a>
<div class="box">
    First Description
</div>

<a href="#" class="clickme">Click Me</a>
<div class="box">
    Second Description
</div>


</body>

</html>

最佳答案

你应该做这样的事情:

$(document).ready(function() {
  // add your code here
})

您在加载HTML->错误之前运行javascript

09-20 23:57