簡單的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（）; 請享用。