我的网站上有一个功能 (example is here) ,您可以在DIV中显示和隐藏文字。代码:
.js代码
function toggle(sDivId) {
var oDiv = document.getElementById(sDivId);
oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
}
.html代码:
<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
<div id="divContent1" style='display:none'>
text here
</div>
</div>
当我在计算机上浏览时,此功能在网站上正常运行。但当我在iPad上检查我的网站时,它不起作用。有谁知道为什么,你能为这个问题建议解决方案吗?谢谢!
答案 0 :(得分:2)
jQuery示例:
<div>
<div id="pressMe" style="cursor: pointer;">Hide and show</div>
<div id="divContent1" style='display:none'>text here</div>
</div>
$('#pressMe').click(function(){
$('#divContent1').toggle();
});
在JSFiddle上玩它。如果需要,您仍然可以从特定div的单击处理程序调用函数,这只是一个替代方法。通常最好使用类(以识别按钮)和data-targetdiv="#divContent1"
等属性来驱动按钮和目标的选择,以便代码可以重复使用,而不是硬连线到代码中的特定ID。
请注意,您需要将JQuery包装在“onloaded”事件中。在曾经是$(document).ready(
的JQuery中,现代简写现在只是$(function(){...});
e.g。
$(function(){
$('.pressMe').click(function(){
$($(this).attr('data-target')).toggle();
});
});
此代码从单击的项目中提取数据属性,以用作要切换项目的选择器。比将id连接到代码中要好得多。该示例有两组div来演示。