jquery hide() function

Question

jQuery를 사용하여 슬라이딩 FAQ 메뉴를 만들려고하는데 hide()가 null이라는 오류가 발생합니다. 나는 크롬과 파이어 폭스에서 맥과 파이어 폭스에서 그것을 시도했다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.hide').hide(); 

    $('h5').click(function(){ 
    $(this).next().slideToggle("slow"); 
    return false; 
}); 


}); 

을 그리고 여기에 HTML입니다 : 여기에 코드는 내가 온라인으로 책과 자습서 쏟아져 마지막 세 시간 동안 한

<a href="#" ><h5 >The Heading </h5></a><br /> 

<div class="hide"> 
The content. 
</div> 

모든 것이 잘 보인다,하지만 분명히 없습니다. : P

모든 도움을 주시면 감사하겠습니다. .next()형제 요소를 숨길하려고 거기에서

Answer 1

업데이트 : Ant가 페이지의 공개 URL을 게시 한 후 Ant의 원래 질문에 게시 된 샘플 코드에 아무런 문제가 없다고 확신 할 수 있으므로 저에게 투표 해 주신 모든 분께 감사드립니다. 문제는 Ant의 페이지가 prototype과 jQuery 라이브러리를 함께 사용한다는 것입니다. 이 사실은 원래의 질문에서 생략되었습니다. 이 두 라이브러리는 $ 변수에 대해 충돌합니다. 당신이

jQuery(document).ready(function() { 
    jQuery('.hide').hide(); 

    jQuery('.toggler').click(function() { 
     jQuery(this).nextAll('.hide:first').slideToggle("slow"); 
     return false; 
    }); }); 

로 사방 $ 대신 키워드 jQuery를 사용하도록 코드 개미를 변경하는 경우 난 당신의 코드가 작동합니다 확신합니다. 코드 아무 문제가 없습니다 여기

http://api.jquery.com/jQuery.noConflict/

jQuery를 페이지에 설명 된대로 또는 당신은 충돌없이 기술을 사용할 수 있습니다. 이것을 공개 사이트에 올리고 URL을 공유 할 수 있습니까? 내가 생각할 수있는 유일한 점은 jQuery가 들여 보내지지 않는다는 것입니다.

</HTML> 

태그

Answer 2

귀하의 .click() 핸들러의 <h5> 요소입니다 ... 그 중 하나가되지 않습니다. 대신이의

:

$(this).next().slideToggle("slow"); 

당신은 <a>에 (다음의 모든 형제 자매를 검색) .nextAll() 같은 필요할 것 :

$(this).parent().nextAll('.hide:first').slideToggle("slow"); 

You can try it out here합니다.

또는

---

, 어쩌면 조금 청소기는이 같은 상황을 단순화하기 위해 앵커에 클래스를 추가 할 수 있습니다

<a class="toggler" href="#"><h5>The Heading </h5></a><br /> 

<div class="hide"> 
The content. 
</div> 

을 그런 다음 <a>에있어 이후, 당신은하지 않습니다 이처럼 .parent() 전화를해야합니다

$(document).ready(function() { 
    $('.hide').hide(); 

    $('.toggler').click(function() { 
     $(this).nextAll('.hide:first').slideToggle("slow"); 
     return false; 
    }); 
}); 

You can try that version out here합니다.

Answer 3

나는 작은을 채찍질 한 HEAD 태그

및 폐쇄 후 자바 스크립트 코드의 나머지 부분에

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

를 이동하십시오 , 이것을 수행하는 방법에 대한 간단한 예제 (DEMO). 나는 이것이 당신의 현재 방법보다 조금 깨끗하다고 ​​생각합니다. 헤더로 <a>을 사용하는 것을 좋아하지 않았습니다.

HTML

<div class="accItem"> 
    <div class="togHead">Heading1</div> 
    <div class="togContent">The content1</div> 
</div> 

<div class="accItem"> 
    <div class="togHead">Heading3</div> 
    <div class="togContent">The content3</div> 
</div> 

JS

$('.togContent:first').slideDown(); 
$('.togHead').click(function(){ 
    var item = $(this).parent().find('.togContent'); 
    if (! $(item).is(':visible')){ 
     $('.togContent').slideUp(); 
     $(item).slideDown("fast"); 
    }    
}); 

CSS

.togHead{ 
    width:300px; 
    background:#000; 
    color:#fff; 
    font-size:20; 
    font-weight:bold; 
    cursor:pointer; 
} 
.togContent{ 
    display:none; 
    width:300px; 
    background:#ff0;  
}