0

我不是真正的开发人员。我更喜欢设计我的网站……所以，对于我的实际项目，我必须开发一些“基本”脚本。

我遇到了一个问题：

<script type="text/javascript">
$("button").click(function toggleDiv(divId) {
$("#"+divId).toggle();
});
;
</script>

进入头部-/头部

<a href="javascript:toggleDiv('myContent');">LINK</a> 
<div> id="myContent">Lorem Ipsum</div>

它适用于 IE8。（奇迹）。但不是其他浏览器......这个想法是，当你点击“链接”时，会出现一个窗口，当你再次点击时，窗口会关闭。

任何想法 ？

谢谢你的时间！

4

2 回答 2

2

问题之一是您混合了两种不同样式的绑定事件处理程序：一种是好的（jQuery 方法），另一种是坏的（属性javascript:中的协议href）——两者不能以任何方式一起工作. 另一个问题是您的选择器对于您提供的 HTML 完全不正确（它正在寻找一个按钮）（您从不创建按钮）。

我建议使用 HTML5data-*属性来id为<div>你的<a>元素指定：

<a href="#" data-divid="mycontent">LINK</a>
<div id="mycontent">Lorem ipsum</div>

然后使用以下 jQuery 代码：

$('a').click(function(e) {
    e.preventDefault(); // e refers to the event (the click),
    // calling preventDefault() will stop you following the link
    var divId = $(this).data('divid');
    $('#' + divId).toggle();
});

请注意，我this在上面的代码中使用过；所指this的内容取决于您使用它的上下文，但在 jQuery 事件处理程序回调函数的上下文中，它将始终引用触发事件的元素（在本例中为您的<a>元素）。

于 2012-12-04T14:06:00.980 回答
0

如果您从处理程序中提取 toggleDiv，它应该可以工作。您可能还需要返回 false 以防止 href 尝试去任何地方。

<script type="text/javascript">
    function toggleDiv(divId) {
        $("#"+divId).toggle();
        return false;
    }
</script>
于 2012-12-04T14:10:50.230 回答