Простой Javascript не работает в FireFox (но работает во ВСЕХ других браузерах) - PullRequest
Новая
       14

Простой Javascript не работает в FireFox (но работает во ВСЕХ других браузерах)

3 голосов
/ 02 ноября 2010

У меня есть этот код, который я использую для раскрытия ответов на некоторые вопросы в разделе часто задаваемых вопросов на моем веб-сайте. Вы нажимаете на вопрос, и div, содержащий ответ, показан ниже.

Работает в Safari, Chrome, Opera и даже IE, но не в Firefox.

Ссылки просто ничего не делают.

Есть идеи, почему, или есть лучшие методы для создания раздела 'FAQ'? Я уже загрузил 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

Ответы [ 9 ]

4 голосов
/ 02 ноября 2010

Поскольку вы устанавливаете идентификатор элемента, который хотите переключить, вам нужно будет использовать: 

document.getElementByID(tag).style.display

вместо просто tag.style.display внутри функции переключения.

3 голосов
/ 02 ноября 2010

Хорошо, в вашем коде есть ряд проблем

Во-первых, важно завершить ваши строки точкой с запятой.

tag.style.display='none' должно быть tag.style.display='none';

Во-вторых, вы должны использовать document.getElementById для идентификатора, чтобы получить элемент DOM

Я бы сделал что-то вроде этого: 

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

Вот демоверсия http://jsbin.com/abuce4/edit

3 голосов
/ 02 ноября 2010

Более простой способ сделать это: 

<script type="text/javascript">
  function toggle(tag) {
      tag.style.display = (tag.style.display == 'block') ? 'none' : 'block';
  }
</script>
3 голосов
/ 02 ноября 2010

попробуйте настроить ваш дисплей на «блок» 

tag.style.display='block'
2 голосов
/ 02 ноября 2010

Поскольку у вас уже есть jQuery, попробуйте это: 

$("#" + tag).toggle();
2 голосов
/ 02 ноября 2010

Серьезно, я рекомендую вам использовать jquery, у вас не будет такого рода проблем, и это менее 30 Кб.

Вот что вы ищете:

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 (), чтобы сделать его более интересным.
1 голос
/ 02 ноября 2010

Попробуйте (цитаты добавлены): 

<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>
1 голос
/ 02 ноября 2010

попробуй <a onclick='toggle(document.getElementById("question1"));'">

0 голосов
/ 02 ноября 2010 
<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 ();или переключить ();Наслаждайтесь.

...