1

我的网站上有一个功能切换（示例在这里），您可以在其中显示和隐藏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 上查看我的网站时，它不起作用。有谁知道为什么，你能建议这个问题的解决方案吗？谢谢！

4

1 回答 1

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”事件中。在过去的 JQuery 中，$(document).ready(但现代速记现在只是$(function(){...});

例如

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

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

于 2013-09-22T08:41:32.133 回答