jQueryの表示/非表示/切り替えは機能しますが、元の状態に戻りません。

jQueryを使用してFAQに関する質問の表示/非表示を試みています。アイデアは、すべての質問が列挙され、ユーザーが回答を見たい場合（リンクのように見える）、答えが表示されるようになっている場合のみです。jQueryの表示/非表示/切り替えは機能しますが、元の状態に戻りません。

クリックが行われるとすぐに回答が元の状態に戻ります。この場合、回答を表示するために質問をクリックすると、それが表示されてから、次の瞬間に消えて表示され、再びクリックして非表示にするまで表示されます。私は以下のコードを貼り付けている

：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery-1.3.2.min.js" ></script> 
<script> 
    $(document).ready(function() { 
     $('div.showhide,#answer').hide(); 
     $('#question').click(function(){ 
     $('div.showhide,#answer').toggle(); 
     }); 
    }); 
</script> 
</head> 
<body> 
<p><a href="" id="question" name="question">Question</a></p><div id="answer"  name="answer">Answer</div></p> 
</body> 
</html>

出典

2009-07-16 Ankur

さて、あなたがリンクをクリックすると、onClickイベントがトリガされ、そしてその直後、ページがあるため、リンクポイント同じページに、再ロードされます（href = ""）、ブラウザはリンクをたどります。

ページがリロードされると、元の状態に戻り、回答が非表示になります。

これを避けるには、clickイベントによってトリガされた関数でfalseを返す必要があります。そのため、ブラウザはリンクをたどらないでしょう。あなたのコードを作成し、まとめると

は次のようになります。

また

$('#question').click(function(){ 
    $('div.showhide,#answer').toggle(); 
     return false; 
    });

は、JavaScript関数にあなたのリンクポイントを作ることができます。

function showAnswer() 
{ 
    $('div.showhide,#answer').toggle(); 
}

とあなたのリンクはなる：あなたは、標準のJavaScript関数に置き換える、上記のコードを削除します

<a id="question" href="javascript:showAnswer();">

しかし、これはとクライアントとして、推奨されていない心に留めておきますjavascriptを無効にすると、回答が表示されません。あなたは常にjavascriptなしで作業しているページを持っている必要がありますし、JavaScriptを使用してより使いやすくする必要があります。あなたは、document.readyにdiv要素を隠していないことができれば、あなたは、$('div.showhide,#answer').toggle();

あるいはさらに良いと$('div.showhide,#answer').hide()を置き換える場合

出典

2009-07-16 07:56:30 FWH

'のhref = "javascriptを：..."'あなたは右、冗談を？ – peirix

私の目標は、それを行うためのさまざまな方法を示すことでした - しかし、あなたが正しいです、私はそれについての警告を追加しました。 – FWH

何が代わりに私が<a href="">に問題があるかもしれないと思うCSS display:none

出典

2009-07-16 07:58:50 usoban

を使用し、発生します。 ..もしあなたがhref属性を削除したら（それはとにかく必要ではないので（適切なカーソルを使用するにはCSSを使用してください）、それは動作します、at least it did for me。 <a href="">として

はonClickイベントをトリガし、ページをリフレッシュし、あなたはJSのイベントを実行するためにhref="#"またはhref="javascript:void(0)で空白href属性を置き換えることができます。

出典

2009-07-16 07:59:12 peirix

ハイパーリンクのデフォルトの次の動作を防止する別の方法はevent.preventDefault()を使用することです：

はデフォルトのアクションを実行してから、ブラウザを防ぎます。

私はこのことをお勧め：

$('#question').click(function(e){ 
    e.preventDefault(); 
    $('div.showhide,#answer').toggle() 
});

出典

2009-07-16 08:03:35 karim79

jQueryの表示/非表示/切り替えは機能しますが、元の状態に戻りません。

答えて

関連する問題