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

Question

我有这个代码，我用它来在我的网站上的FAQ部分中显示一些问题的答案。 单击该问题，下面显示包含答案的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

一种更简单的方法是：

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

Answer 4

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

首先，用分号结束你的线是很重要的。

tag.style.display='none'应为tag.style.display='none';

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

我会做这样的事情：

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

这是一个演示 http://jsbin.com/abuce4/edit

Answer 5

说真的，我建议你使用jquery，你不会遇到这种问题而且它不到30 Kbs。

这是你寻找的：

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

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

EDITED

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

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

我会这样做：

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

其他一些考虑因素

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

Answer 6

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

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

Answer 7

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

Answer 8

试试这个（添加了引号）：

<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 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（）; 或toggle（）; 请享用。