我从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; }
我试图在我自己的网站上复制,但它不起作用。它会显示所有内容,但在点击时,没有任何反应。这是我的代码。
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链接的关系。
答案 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>