所以我在我的网站上使用了一个效果很好的显示/隐藏脚本。但是有 1 个问题和 1 个请求。
- 一次只允许显示 1 个 div
- 当 div 出现时， 让它从标题下方“滑”入。
这是脚本:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
以下是按钮如何与 HTML 中的 div 相关的工作方式:
<a onclick="toggle_visibility('testing');">Testing</a>
<div style="display:none;" id="testing">
testing for page 2
</div>
以下是有关幻灯片动画的屏幕布局:
如果有人可以帮助将这些函数添加到脚本中，或者他们有一个不同的脚本可以执行相同的操作但更好，请告诉我。 谢谢
最佳答案
如果您想使用 jQuery，请查看 slideToggle():
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var activeDiv = 'welcome';
function toggle_visibility(id) {
if ( activeDiv === id ) return;
$('#' + activeDiv).css('display','none');
activeDiv = id;
$('#' + id).slideToggle();
$('#' + id).css('display','block');
};
$(document).ready(function() {
$('#welcome').slideToggle();
});
</script>
</head>
<body>
<a onclick="toggle_visibility('testing');">Show the First DIV</a><br>
<a onclick="toggle_visibility('testing2');">Show the Second DIV</a>
<div style="display: none;" id="testing">
The First DIV
</div>
<div style="display: none;" id="welcome">
Welcome!
</div>
<div style="display: none;" id="testing2">
The Second DIV
</div>
</body>
</html>
关于javascript - 向预先存在的脚本中添加一次显示一次的功能和幻灯片动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39419722/