我有一个 HTML 功能(下落的物体),其中包含以下内容:
<div id="elementsToScroll">
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=43 height=581 style='position:absolute; left:17%; top:23px; width:100; height:581px;'><font>🍇</font></marquee>
</div>
和这个按钮:
<button onclick="onOffScroll()">Grapes</button>
我正在尝试使用以下 JavaScript 使按钮打开和关闭该功能:
$(document).ready(function(){
function onOffScroll() {
var x = document.getElementById('elementsToScroll');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}}
});
请帮助我确定为什么它不起作用(或者是否有更好的方法)。
(我知道掉落的物体已经过时,但这不是重点 - 我想让切换功能正常工作,以便可以随意打开或关闭)。谢谢:)
脚本:
<!--Scripts-->
<script src="/js/myjQuery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
最佳答案
看起来您并不是在寻找 jQuery,因为您发布的代码使用的是纯 JavaScript。以下是如何使用和不使用 jquery 执行此操作的两个示例:
JQuery 方式(正如 @Dylan Anlezark 提到的)
function onOffScroll() {
$('#elementsToScroll').toggle();
}
纯 JavaScript 方式
function onOffScroll() {
var x = document.getElementById('elementsToScroll');
if (isVisible(x)) {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
}
function isVisible(element) {
return element.offsetWidth !== 0 && !element.offsetHeight !== 0;
}
假设您的 HTML 按照您发布的方式进行设置,则除了 onOffScroll
的函数代码之外,您无需更改任何内容
<div id="elementsToScroll">
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=43 height=581 style='position:absolute; left:17%; top:23px; width:100; height:581px;'><font>🍇</font></marquee>
</div>
<button onclick="onOffScroll()">Grapes</button>
关于javascript - 使用 JavaScript/jQuery 函数打开和关闭 HTML 功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42914133/