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

时间:2015-08-19 01:07:02

标签: javascript jquery html css jsfiddle

我从JSFiddle

获得了一些代码

$(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;
&#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;
&#13;
&#13;

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

1 个答案:

答案 0 :(得分:3)

如果你想让它工作,你需要包含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>