我想使用jQuery的slideToggle()效果切换标题div打开和关闭。我安装了jquery-3.2.1.min.js并使用以下代码:
$('.top-drawer').click(function() {
$('.top-drawer .myblock .container').slideToggle();
$('.top-drawer .closebutton').toggleClass('closed');
$('.top-drawer .openbutton').toggleClass('closed');
});
.myblock .container {
display: none;
height: 20%;
padding: 10pt 0;
overflow: hidden;
}
.openbutton.closed,
.closebutton.closed {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="top-drawer">
<div class="myblock">
<div class="container">
<div>
<h2>Hello World!</h2>
<p>
Lots of words....
</p>
</div>
</div>
</div>
<header class="closebutton closed">Close</header>
<header class="openbutton ">Open</header>
</section>
toggleClass()函数工作正常,如果我用toggleClass替换slideToggle,我可以让div出现并消失。但我没有得到幻灯片效果。 错误消息是:
Uncaught TypeError: $(...).slideToggle is not a function
at HTMLElement.<anonymous> (mycode.js:134)
at HTMLElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLElement.q.handle (jquery-3.2.1.min.js:3)
我查看过其他帖子,但无法看到问题。最初我使用的是旧版本的jQuery,并认为可能就是这样。我首先下载了新的slim版本,但后来发现它没有包含效果。然后我下载了 min 版本,但我仍然收到错误。
任何帮助都将不胜感激。