3


0

シンプルなJavascriptはFireFoxでは機能しません(ただし、他のすべてのブラウザーでは機能します)

私のウェブサイトのFAQセクションでいくつかの質問に対する回答を明らかにするために使用しているこのコードを持っています。 質問をクリックすると、回答を含むdivが下に表示されます。

Safari、Chrome、Opera、IEでも動作しますが、Firefoxでは動作しません。

リンクは何もしません。

「FAQ」セクションを行うための理由、またはより良い方法はありますか? そこにもっと良い方法があれば、jQueryを既にページにロードしています。わかりません。 またはCSSのみのソリューションですか?

これが私のコードです:

  • JSコード:*

    function toggle(tag) {
        if (tag.style.display=='') {
            tag.style.display='none'
        } else {
            tag.style.display=''
        }
    }
  • HTMLコード:*

FAQ Question goes here

        FAQ Answer goes here

9 Answer


4


トグルする要素のIDを設定するため、次を使用する必要があります。

document.getElementByID(tag).style.display

トグル関数内で単に `tag.style.display`の代わりに。


3


ディスプレイを「ブロック」に設定してみてください

tag.style.display='block'


3


これを行う簡単な方法は次のとおりです。

  function toggle(tag) {
      tag.style.display = (tag.style.display == 'block') ? 'none' : 'block';
  }


3


あなたのコードにはいくつかの問題があります

まず、行をセミコロンで終了することが重要です。

tag.style.display = 'none'`は tag.style.display =' none '; `でなければなりません

次に、idでdocument.getElementByIdを使用してDOM要素を取得する必要があります

私はこのようなことをします:

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


2


真剣に、jqueryを使用することをお勧めします。この種の問題は発生せず、30 Kbs未満です。

探しているものは次のとおりです。

とにかく、常に特定の要素を取得するために `document.getElementByID`を使用する必要があります。

編集

私がこの状況にあったかどうかは、HTMLの構造に依存します。

私はこれをするだろう:

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

その他の考慮事項

  • 私はおそらく「display:none」を単純な答えには使用しません 実用的な理由ではありません。 (一部の障害者のソフトウェアで発生するように)JavaScriptが有効になっていない人は、答えを読むことができません。 これがjavascriptで答えを隠す理由です。 JavaScriptが有効になっている場合にのみ消えます。

  • animate()、slidetoggle()などの他のエフェクトを使用して作成できます もっと面白い。


2


すでにjQueryを持っているので、これを試してください:

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


1


試してみる


1


これを試してください(引用符を追加):

FAQ Question goes here

        FAQ Answer goes here

および(getElementByIdを使用):

function toggle(tag) {
    tag = document.getElementById(tag);
    if (tag.style.display=='') {
        tag.style.display='none'
    } else {
        tag.style.display=''
    }
}

更新:jQueryソリューションでは、jQueryタブアプローチを使用します。

FAQ Question Link 1

    FAQ Answer goes here

FAQ Question Link 2

    FAQ Answer goes here

そしてJS:

$(document).ready(function() {
    $('.toggle').click(function() {
        $($(this).attr('href')).toggle();
        return false;
    });
});


0


Question
Answer

または、より「一般的」かつクリーン:

HTML:

Question 1
Answer 1

Question 2
Answer 1

CSS:

.answer{
display:none;
}

JS :

$(document).ready(function() {

$(".question").click(function(event){
    $(this).next().slideToggle();
});
}

slideToggle();またはtoggle();楽しい。