기본 사항이 있어야합니다. 기능을 클릭하면 숨기기/클릭하여 표시됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("div > div.question").mouseover(function() { 
        if($(this).next().is(':hidden')) { 
         $(this).next().show(); 
        } else { 
         $(this).next().hide(); 
        } 
       });  
      });   
     </script> 
     <style> 
      div.flashcard { 
       margin: 0 10px 10px 0; 
      } 
      div.flashcard div.question { 
       background-color:#ddd; 
       width: 400px;   
       padding: 5px;  
       cursor: hand;  
       cursor: pointer; 
      } 
      div.flashcard div.answer { 
       background-color:#eee; 
       width: 400px; 
       padding: 5px;  
       display: none;   
      } 
     </style> 
    </head> 
<body> 
    <div id="1" class="flashcard"> 
    <div class="question">Who was Wagner?</div> 
    <div class="answer">German composer, conductor, theatre director and essayist.</div> 
    </div> 

    <div id="2" class="flashcard"> 
    <div class="question">Who was Thalberg?</div> 
    <div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div> 
    </div> 
</body> 
</html>

Worked!

감사합니다. bobince!

alt text http://www.deviantsart.com/upload/o61pba.jpg

출처

2010-07-06 Edward Tanguay

나는 NetFront는 희망 깨진 브라우저를 방지하기 위해 상대적으로 unflashy를 유지하려고에이 테스트 만 할 수 없어 기능 :

window.onload= function() { 
    var divs= document.getElementsByTagName('div'); 
    for (var i= divs.length; i-->0;) 
     if (divs[i].className==='question') 
      Toggler(divs[i]); 
}; 

function Toggler(div) { 
    var state= false; // assume initially hidden 
    var toggled= div.nextSibling; 
    while (toggled.nodeType!==1) 
     toggled= toggled.nextSibling; // find next element sibling 

    div.onclick= function() { 
     state= !state; 
     toggled.style.display= state? 'block' : 'none'; 
    }; 
};

모든 mouseover을 토글하지 않고 click 이벤트를 사용하도록 설정했습니다. 약간 이상하게 보였습니다. n 무의미한 전화).

(덧붙여, 그것은이 유효하지 않습니다. 순전히 숫자 id 속성 값을 방지하고 이상한 행동을 일으킬 수 있습니다.)

출처

2010-07-07 00:03:17 bobince

<div id="1" class="flashcard" onclick="if (this.style.display == '') this.style.display='none'; else this.style.display = ''"> 
card contents 
</div>

는 빠르고 :) 더러운

는

출처

2010-07-06 23:53:15 Nick

에서

window.onload = function(){ var questions = getElementsByClass('question',document,'div'); for (var idx=0;idx<questions.length;idx++) questions[idx].onclick = function(){ var answer = getElementsByClass('answer',this.parentNode,'div')[0]; if (answer.style.display == '') answer.style.display='block' else answer.style.display = ''; } } function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if (node == null) node = document; if (tag == null) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if (pattern.test(els[i].className)) { classElements[j] = els[i]; j++; } } return classElements; }

라이브 또 다른 자세한 답변을, 당신은을 만들 수 있습니다 기능 (귀하의 휴대 전화가 지원하는 지 확실하지 않은 경우 ... smth like : function showhideme (element) { element.style.display = element.style.display = = ''? '없음': ''; } ...

– Nick

또한 http://www.jsfiddle.net/WTRFS/1/

출처

2010-07-07 00:10:05

이 jquery 코드를 표준 javascript로 변환하는 방법은 무엇입니까?

Worked!

답변

관련 문제