jquery hide（）function

Question

jQueryを使用してスライドFAQメニューを作成しようとしていますが、hide（）がnullであるというエラーが表示されます。私はMacでChromeとFirefoxで、WinでFirefoxを試しました。ここでは、コードです：

<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> 

私はオンライン書籍やチュートリアルの上に注ぐ最後の3時間を費やしてきたし、すべてが右に見えますが、どうやらありません。 ：P

何か助けていただければ幸いです。

Answer 1

更新：AntがページのパブリックURLを公開した後、元の質問でAntが投稿したサンプルコードに問題はないと自信を持って反論することができます。問題は、AntのページがprototypeとjQueryの両方のライブラリを一緒に使用していることです。この事実は、元の質問から省略されています。これらの2つのライブラリは$ variableよりも矛盾しています。あなたは

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

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

としてどこでも$の代わりにキーワードのjQueryを使用するようにコードのAntを変更した場合、私はあなたのコードが動作します確信しています。あなたのコードは何も問題はありませんここ

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

jQueryのページで説明するように別の方法としては、無競合技術を使用することができます。これを公開サイトに置いてURLを共有できますか？私が考えることができるのは、jQueryが取り込まれていないということだけです。

</HTML> 

タグ

Answer 2

あなた.click()ハンドラは、そこからは.next()兄弟要素を非表示にしようとしている...それらのいずれかが存在しない、<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>にしていることから、そうでありません

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

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

You can try that version out here：このような.parent()コールを、必要とします。

Answer 3

私は小さなをホイップしているHEADタグ

と終了後のjavascriptのコードの残りの部分で

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