显示/隐藏iPad的功能切换

时间:2013-09-22 08:14:39

标签: javascript jquery ios ipad toggle

我的网站上有一个功能 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上检查我的网站时,它不起作用。有谁知道为什么,你能为这个问题建议解决方案吗?谢谢!

1 个答案:

答案 0 :(得分:2)

jQuery示例:

HTML

<div>
    <div id="pressMe" style="cursor: pointer;">Hide and show</div>
    <div id="divContent1" style='display:none'>text here</div>
</div>

的jQuery

$('#pressMe').click(function(){
    $('#divContent1').toggle();
});

JSFiddle:http://jsfiddle.net/cuDp5/

在JSFiddle上玩它。如果需要,您仍然可以从特定div的单击处理程序调用函数,这只是一个替代方法。通常最好使用类(以识别按钮)和data-targetdiv="#divContent1"等属性来驱动按钮和目标的选择,以便代码可以重复使用,而不是硬连线到代码中的特定ID。

更灵活的数据驱动版本示例:http://jsfiddle.net/cuDp5/2/

请注意,您需要将JQuery包装在“onloaded”事件中。在曾经是$(document).ready(的JQuery中,现代简写现在只是$(function(){...});

e.g。

$(function(){
   $('.pressMe').click(function(){
      $($(this).attr('data-target')).toggle();
   });
});

此代码从单击的项目中提取数据属性,以用作要切换项目的选择器。比将id连接到代码中要好得多。该示例有两组div来演示。