简单的 Javascript 在 FireFox 中不起作用（但在所有其他浏览器中起作用）

Question

我有这段代码，用于在我的网站的常见问题解答部分中显示一些问题的答案。您单击问题，下面会显示包含答案的 div。

它适用于 Safari、Chrome、Opera 甚至 IE，但不适用于 Firefox。

链接什么都不做。

有什么想法，或者有什么更好的方法来做一个“常见问题”部分吗？我已经在我的页面中加载了 jQuery，如果那里有什么可以做得更好的话，我不知道。还是纯 CSS 解决方案？

这是我的代码：

JS代码：

    <script type="text/javascript">
    function toggle(tag) {
        if (tag.style.display=='') {
            tag.style.display='none'    
        } else {
            tag.style.display=''
        }
    }
    </script>

HTML 代码：

<a href="javascript: toggle(question1)">FAQ Question goes here</a>
    <div id="question1" style="display:none">
        <p>FAQ Answer goes here</p>
    </div

Answer 1

因为您设置了要切换的元素的 ID，所以您需要使用：

document.getElementByID(tag).style.display

而不仅仅是tag.style.display 在您的切换功能中。

Answer 2

尝试将显示设置为“阻止”

tag.style.display='block'

Answer 3

试试<a onclick='toggle(document.getElementById("question1"));'">

Answer 4

说真的，我推荐你使用 jquery，你不会遇到这种问题，而且它小于 30 Kbs。

这是你要找的东西：

http://api.jquery.com/toggle/

无论如何，您应该始终使用：document.getElementByID 来获取某个元素。

已编辑

如果我遇到这种情况，这取决于您的 HTML 的结构：

http://www.jsfiddle.net/dactivo/Qcm4G/

我会这样做：

$(".questionsheader").click(function(){
                             $(this).next("div").toggle();                             }
);

其他一些注意事项

• 出于简单但可能不切实际的原因，我不会使用“display:none”作为答案。没有启用 javascript 的人（就像一些残障人士的软件一样）将无法阅读答案。这就是我用 javascript 隐藏答案的原因。只有启用了 javascript，它们才会消失。
• 您可以使用其他效果，如 animate()、slidetoggle() 使其更有趣。

Answer 5

试试这个（添加引号）：

<a href="javascript: toggle('question1')">FAQ Question goes here</a>
    <div id="question1" style="display:none">
        <p>FAQ Answer goes here</p>
    </div>

和（使用 getElementById）：

<script type="text/javascript">
function toggle(tag) {
    tag = document.getElementById(tag);
    if (tag.style.display=='') {
        tag.style.display='none'    
    } else {
        tag.style.display=''
    }
}
</script>

更新：对于 jQuery 解决方案，我会使用 jQuery Tabs 方法：

<a class="toggle" href="#question1">FAQ Question Link 1</a>
<div id="question1" style="display:none">
    <p>FAQ Answer goes here</p>
</div>
<a class="toggle" href="#question2">FAQ Question Link 2</a>
<div id="question2" style="display:none">
    <p>FAQ Answer goes here</p>
</div>

和 JS：

<script type="text/javascript">
$(document).ready(function() {
    $('.toggle').click(function() {
        $($(this).attr('href')).toggle();
        return false;
    });
});
</script>

Answer 6

一个更简单的方法是：

<script type="text/javascript">
  function toggle(tag) {
      tag.style.display = (tag.style.display == 'block') ? 'none' : 'block';
  }
</script>

Answer 7

既然你已经有了 jQuery，试试这个：

$("#" + tag).toggle();

Answer 8

好的，您的代码中存在许多问题

首先，以分号结尾很重要。

tag.style.display='none' 应该是tag.style.display='none';

其次，必须在id上使用document.getElementById来获取DOM元素

我会这样做：

function toggle(elementId) {
    var tag = document.getElementById(elementId);
    ...
}

这是demohttp://jsbin.com/abuce4/edit

Answer 9

<a href="#" onclick="javascript:$(this).next().toggle();">Question</a>
<div style="display:none;">Answer</div>

或更多“通用”和干净：

HTML：

<a class="question">Question 1</a>
<div class="answer">Answer 1</div>

<a class="question">Question 2</a>
<div class="answer">Answer 1</div>

CSS：

.answer{
display:none;
}

JS：

$(document).ready(function() {

$(".question").click(function(event){
    $(this).next().slideToggle();
});
}

slideToggle();或切换（）； 享受吧。