シンプルなjqueryアコーディオンコードが動作しない

Question

私は5種類の色のjqueryアコーディオンを持っています。リンクhttp://www.photorestorationexpert.co.uk/testFolder/indexCb1Accordian.htmlを参照してください。理由がわからないので、なぜそれが機能していないのかについての説明が必要です。私は歓迎のスライスをクリックすると 、jqueryのコードであるコンテンツ を明らかに滑り降りていないようです：

$(document).ready(function() { 
    $('#va-accordion .va-content').hide(); 
    $('.va-slice').click(function(){ 
      $('#va-accordion .va-content').slideUp(); 
      $(this).parent().next().slideDown(); 
      return false; 
    }); 

}）;

ここ

は上記のコードにhtmlです：

<div id="va-accordion">  
<div class="va-slice va-slice-1"> 
<h2 class="va-heading">Welcome</h2> 
<div class="va-content">Nam facilisis convallis elit ac.</div> 
</div> 

<div class="va-slice va-slice-2"> 
<h2 class="va-heading">About</h2> 
<div class="va-content"></div> 
</div> 

<div class="va-slice va-slice-3"> 
<h2 class="va-heading">What To Expect</h2> 
<div class="va-content"></div> 
</div> 

<div class="va-slice va-slice-4"> 
<h2 class="va-heading">Prices</h2> 
<div class="va-content"></div> 
</div> 

<div class="va-slice va-slice-5"> 
<h2 class="va-heading">Contact</h2> 
<div class="va-content"></div> 
</div> 

Answer 1

私はちょうどあなたが、私は、全体的なアコーディオンのdivの

... 
    <div class="va-slice va-slice-5"> 
     <h2 class="va-heading">Contact</h2> 
    <div class="va-content"></div> 
</div> 
</div> // <-- need one more to close the whole accordian out 

Answer 2

を閉じます最終divタグが欠落している気づきましたこのコードを使用している正確な目的はわかりませんが、jQuery UIを使用することをお勧めしますか？

こちらをご覧ください。http://jqueryui.com/魔法のように http://jqueryui.com/demos/accordion/

<script> 
$(function() { 
    $("#accordion").accordion(); 
}); 
</script> 

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
     Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os. </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
     Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os. </div> 
    <h3><a href="#">Section 3</a></h3> 
    <div> 
     Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os.   </div> 
    <h3><a href="#">Section 4</a></h3> 
    <div> 
     Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os. 
    </div> 
</div> 

作品：

はセットアップに3のように秒かかり内蔵アコーディオンウィジェットがあります。 これが役に立たないと思われる場合は、お気軽にお知らせください。コードを確認できます。乾杯！

ちょうどあなたがまだ、これは正しいコードでカスタムコードを使用したい場合：

$(document).ready(function() { 
    $('#va-accordion .va-content').hide(); 
    $('.va-heading').click(function(){ 
      $('#va-accordion .va-content').slideUp(); 
      $(this).next().slideDown(); 
      return false; 
    }); 
}); 

（あなたはすなわち+コンテンツ を見出し、アコーディオンで全体のセクションにクリックイベントを結合し、あなたがスライドしていたときには、それは「va-content」を隠してしまったので、すでに表示されている「va-slice」全体でした。jQueryは混乱していました。もしtoggle（）ターゲットDOMオブジェクトのどの部分も既に表示されています。

幸運！

Answer 3

"slideDown"を使用している場合は、親の次の項目、つまり「va-accordion」DIVの次のタグでそれを実行しています。

ps。なぜあなたは "＃va-accordion .va-content"を隠すのですか？また、クリックするたびにあなたはそれをスライドアップしますか？

Answer 4

jquery ui &を見たことがありましたが、最初は少し混乱しましたが、私はそれをさらに調べる必要があると思いますが、当面は私が投稿したコードを使用します。 私はあなたの説明を理解していると思いますが、あなたは私が持ってはならないセクション全体（vaスライス）にクリックイベントをバインドしていたと言います。 vaスライスの中で私は見出しがある&コンテンツ&私はコンテンツ全体（vaスライス）ではなく、&のコンテンツだけを隠すべきです。 va-slice-1、va-slice-2、va-slice-3、va-slice-4、va-slice-5をで入力できますか？

にWNYない場合は、（関数（）など

$('.va-slice-1').click(function() 

をクリックして、それが「VA-スライス」の一部であるため、それはそれはまた、その「VA-スライスのCSSで私に指摘されましたそれは、コンテンツ

va-slice{ 
cursor:pointer; 
margin:0 auto; 
width:725px; 
overflow:hidden; 
    height:50px; 
} 

もう一つの全てを示していなかったとして、「私は高さを取る必要がありますあなたはそれが滑り落ちる&を見出しをクリックすると、コンテンツがジャンプはここhttp://www.photorestorationexpert.co.uk/testFolder/indexCb1Accordian.html