2016-08-24 8 views
1

最近、テンプレートを調整しています。 FAQのこの種のセクションがあり、質問をクリックすると回答が滑り落ちます。/ show-jQuery "close"は機能しません

残念ながら、これは壊れているようです。 私はfooter.tplにjqueryを追加できると思っていました。 これは基本的には機能しますが、まだ調整が必要です。

私は.closest()を使用することが正しい選択だと思っていましたが... naaa:/ それを放置すると、それは実行されますが、その後はすべてliが反応します。 代わりに使用する必要があるので、「最も近い」liのみが表示/非表示になりますか?

$(document).ready(function(){ 
 
    $(".accordion_current").click(function(){ 
 
     $.closest(".accordion_content").slideToggle(); 
 
    }); 
 
});
<ul class="list-accordion"> 
 
\t <li> 
 
\t  <h3 class="accordion_current">Anfahrt & Messeplan</h3> 
 
\t  <ul class="accordion_content"> 
 
\t \t <li> 
 
\t \t <p>test</p> 
 
       </li> 
 
      </ul> 
 
\t </li> 
 
     <li> 
 
\t  <h3 class="accordion_current">Anfahrt & Messeplan</h3> 
 
\t  <ul class="accordion_content"> 
 
\t   <li> 
 
\t   <p>test</p> 
 
       </li> 
 
\t  </ul> 
 
     </li> 
 
</ul> \t

答えて

1

あなたがnextを必要とする、closestを必要としません。 closestであなたは要素の親を見つけるでしょうが、あなたは兄弟を探したいと思っています。

また、$だけでなく、$(this)を使用する必要があることに注意してください。私が(探していたまさにだ - つまり

$(function() { 
 
    $(".accordion_current").click(function() { 
 
     $(this).next(".accordion_content").slideToggle(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="list-accordion"> 
 
    <li> 
 
    <h3 class="accordion_current">Anfahrt & Messeplan</h3> 
 
    <ul class="accordion_content"> 
 
     <li> 
 
     <p>test</p> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <h3 class="accordion_current">Anfahrt & Messeplan</h3> 
 
    <ul class="accordion_content"> 
 
     <li> 
 
     <p>test</p> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

+0

ありがとう: – Manisch

関連する問題