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

因为您设置了要切换的元素的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);
    ...
}

这是demo 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>

UPDATES ：对于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（）; 享受。

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

9 个答案: