gpt4 book ai didi

javascript - 滑动面板 - jQuery

转载 作者:行者123 更新时间:2023-11-28 00:07:17 25 4
gpt4 key购买 nike

我对 jQuery 相当陌生,我正在尝试一个“面板”,它应该在单击时滑动,尽管我无法理解为什么“面板”在单击时不滑动。谁能启发我这个话题?我也愿意接受有关我的代码的任何其他建议。

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Slide Panel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
<div class="panel">
<br />
<br />
<p>Now you see me!</p>
</div>
<p class="slide"><div class="pull-me">Slide Up/Down</div></p>
</body>
</html>

JS(已编辑,已修复):

$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
})

正确解决方案:http://jsfiddle.net/3kt10v3b/

JSFiddle:http://jsfiddle.net/3kt10v3b/

最佳答案

以防万一有人遇到这个问题,这里是正确的代码:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Slide Panel</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
<div class="panel">
<br/><br/>
<p>Now you see me!</p>
</div>

<p class="slide"><div class="pull-me">Slide Up/Down</div></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

JS:

$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
})

Fiddle 上的解决方案

感谢@Jonathan Michalik 的评论

关于javascript - 滑动面板 - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31227259/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com