Question

（原来真正的问题是我正在测试本地文件。这在chrome和firefox中运行良好，但不适用于IE。一旦我实际通过IE访问实时版本，它工作正常。感谢大家帮助，并感谢bipen让我显示切换和缓慢！）

我在这个主题上看了几篇帖子，但没有看到明确的解决方案。我刚开始使用jquery / javascript的东西，似乎无法弄清楚如何在IE中使这个工作。我正在使用IE9。这适用于jsfiddle，firefox和chrome。如果我有任何方法可以压缩这段代码而不是使用hide / show，我很乐意听到它们。感谢。

以下是我在脑海中使用的脚本：

    $(document).ready(function() {
    $('#crossfitcontent').hide();
    $('.hidecrossfit').hide();
    $('.showcrossfit').click(function() {
        $('#crossfitcontent').show();
        $('.hidecrossfit').show();
        $('.showcrossfit').hide();
        return false;
        });
    });
   $('.hidecrossfit').click(function() {
       $('.showcrossfit').show();
       $('#crossfitcontent').hide();
       $('.hidecrossfit').hide();

    return false;
});

以下是html：

<div id="crossfit">
Crossfit 
<div class="toggleplus">
<div><a href="" class="showcrossfit" >Thing someone clicks to show div</a></div>
<div><a href="" class="hidecrossfit" >Thing someone clicks to hide div</a></div>
</div> 
<div id="crossfitcontent">  
<div>Stuff about crossfit</div>
</div>
</div>

所有div可能没有意义，但这是因为它适合更大的元素，并且还会添加其他元素。

提前感谢您的帮助。

Answer 1

你可以使用jquery toggle() ..显示或隐藏div ...而不是为每次点击创建功能.. Toggle也带有动画..所以你在切换时会有很好的效果..

$(document).ready(function() {
  $('#crossfitcontent').hide();
  $('.showcrossfit').click(function() {
      $('#crossfitcontent').toggle('slow');
      return false;
  });
});

这里是jsfiddle ..你可以看看......

http://jsfiddle.net/49VdM/

隐藏/显示适用于其他浏览器;不是IE

1 个答案: