jQuery show/hide/toggle works는 그대로 있지만 그대로 유지되지 않습니다. 원래 상태로 되돌아갑니다.

jQuery를 사용하여 FAQ 질문에 대한 답변을 표시하거나 숨기려고합니다. 아이디어는 모든 질문이 나열되어 있고 사용자가 대답을보고 싶어 할 때만 (링크처럼 보이는) 질문을 클릭하고 대답을 볼 수있게됩니다.jQuery show/hide/toggle works는 그대로 있지만 그대로 유지되지 않습니다. 원래 상태로 되돌아갑니다.

답변은 클릭하자마자 원래 상태로 돌아갑니다. 이 경우 응답을 표시하기 위해 질문을 클릭하면 다시 표시되고 숨길 수 있도록 다시 클릭 할 때까지 다음 순간에 표시되고 사라집니다. 나는 아래의 코드를 붙여 넣은

<!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; 
    });

, 당신은 자바 스크립트 함수에 연결 지점을 만들 수 있습니다. 클라이언트와 마찬가지로

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

을하지만 마음이 보관하지 않는 것이 좋습니다 :

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

과 링크가 될 것이라고이 : 그런 다음 표준으로 대체, 위의 자바 스크립트 함수를 코드를 제거 할 것 javascript를 사용 중지하면 답변을 볼 수 없습니다. 항상 자바 스크립트가없는 페이지가 있어야하며 자바 스크립트를 추가하면 더 유용하게 사용할 수 있습니다. 당신이 document.ready에 사업부를 숨길 할 수 있다면 대신 내가 <a href="">에 문제가있을 수 있습니다 생각 CSS를 display:none

출처

2009-07-16 07:56:30 FWH

'HREF = "자바 스크립트 : ..." '당신이 바로, 농담을? – peirix

내 목표는 다양한 방법을 제시하는 것이 었습니다.하지만 당신 말이 맞습니다. 그것에 대해 경고를했습니다. – FWH

. .. href 속성을 제거하면 어쨌든 필요하지 않으므로 (적절한 커서를 사용하려면 CSS를 사용하십시오), at least it did for me이 작동합니다. <a href="">는 onClick 이벤트를 트리거하고 페이지를 새로 고침으로

, 당신은 JS 이벤트를 실행 href="#" 또는 href="javascript:void(0)와 빈 href 속성을 대체 할 수 있습니다.

출처

2009-07-16 07:58:50 usoban

를 사용, $('div.showhide,#answer').toggle();

또는 더 나은와 $('div.showhide,#answer').hide()을 대체하면 어떻게됩니까

출처

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 show/hide/toggle works는 그대로 있지만 그대로 유지되지 않습니다. 원래 상태로 되돌아갑니다.

답변

관련 문제