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

Question

I have this code which I'm using to reveal the Answers to some questions in an FAQ section on my website. You click the question and the div containing the answer is revealed below.

It works in Safari, Chrome, Opera and even IE, but not in Firefox.

The links just do nothing.

Any ideas why, or any better methods for doing an 'FAQ' section? I have already got jQuery loaded in my page if there's something that could be done better with it there, I don't know. Or a CSS only solution?

Here is my code:

JS code:

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

HTML code:

<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

Because you set the ID of the element you want to toggle, you would need to use:

document.getElementByID(tag).style.display

instead of just tag.style.display inside of your toggle function.

Answer 2

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

tag.style.display='block'

Answer 3

A simpler way to do this is:

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

Answer 4

Ok there are a number of issues in your code

First, it is important to end your lines with a semi-colon.

tag.style.display='none' should be tag.style.display='none';

Second, You must use document.getElementById on the id to get the DOM Element

I would do somthing like this:

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

Here is a demo http://jsbin.com/abuce4/edit

Answer 5

Seriously, I recommend you use jquery, you will not have this kind of problem and it's less than 30 Kbs.

Here is what you look for:

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

Anyway, you should always use: document.getElementByID to get a certain element.

EDITED

It depends on the structure of your HTML, if I had this situation:

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

I would do this:

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

SOME OTHER CONSIDERATIONS

• I wouldn't use "display:none" for the answers for a simple yet perhaps not practical reason. People without javascript enabled (as happen with the software of some handicapped people) will not be able to read the answers. This is why I hide the answers with javascript. They will only disappear if javascript is enabled.
• You can use other effects like animate(), slidetoggle() to make it more interesting.

Answer 6

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

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

Answer 7

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

Answer 8

Try this (quotes added):

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

and (used 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>

UPDATES : for the jQuery solution, I would use the jQuery Tabs approach:

<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>

and the 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>

Or more 'generic' and clean :

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(); or toggle(); Enjoy.