Question

我写这个非常简单的代码来按下按钮时展开和折叠文本，但它不起作用。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.expand').click(function(){
    $('.content').slideToggle('slow');
});
</script>
</head>
<body>
<div class="sitesection">
    <p class="expand"><a href="#">Click Here To Display The Content</a></p>
    <p class="content">Hello World!"</p>
</div>
</body>
</html>

当我点击“点击此处显示内容”时，没有任何反应。

Answer 1

将您的代码置于底部或使用DOM ready事件

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
<div class="sitesection">
    <p class="expand"><a href="#">Click Here To Display The Content</a></p>
    <p class="content">Hello World!"</p>
</div>
<script>
$('.expand').click(function(){
    $('.content').slideToggle('slow');
});
</script>
</body>
</html>

＆＃13;

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
<div class="sitesection">
    <p class="expand"><a href="#">Click Here To Display The Content</a></p>
    <p class="content">Hello World!"</p>
</div>
<script>
$('.expand').click(function(){
    $('.content').slideToggle('slow');
});
</script>
</body>
</html>

或者必须在加载文档后调用javascript。

JQuery和扩展/折叠功能

2 个答案: