Question

获得了一些代码

$(function() { $('.toggler').click(function() { $(this).find('div').slideToggle(); }); });

<div class="toggler"> This is the title 
<div> This is the content to be toggled </div>

div.toggler { background:lightblue; cursor:pointer; }
div.toggler div { display:none; }

我试图在我自己的网站上复制，但它不起作用。它会显示所有内容，但在点击时，没有任何反应。这是我的代码。

＆＃13;

div.toggler { background:lightblue; cursor:pointer; }
div.toggler div { display:none; }

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<link href="design.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			$(function() {
    			$('.toggler').click(function() {
       				 $(this).find('div').slideToggle();
   				});
			});
		</script>
	</head>
	<body>
		<div class="toggler"> This is the title 
    		<div> This is the content to be toggled </div>
		</div>
	</body>
</html>

＆＃13;

注意：您还可以看到代码与JSFiddle链接的关系。

Answer 1

如果你想让它工作，你需要包含jQuery库。

<head>
    <link href="design.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.toggler').click(function() {
                $(this).find('div').slideToggle();
            });
        });
    </script>
</head>

另外一个建议是，在关闭body标签之前，将script标记与代码放在所有HTML之后，以便JS编译不会干扰浏览器呈现。< / p>

为什么我的JavaScript代码不起作用？

1 个答案: