jQuery手风琴无法正常工作

Question

您好，我正在尝试使用Jquery在页面上的FAQ部分制作一个手风琴，但是我似乎无法正确地做到这一点。

我想做的是，当单击加号图标时，所有打开的答复框都必须向上滑动，而我单击的那个必须向上滑动。

这是我的代码：

 $(document).ready(function(){ var open; $(".faq_reply_container").slideUp(); $(".faq_show_icon").click(function(){ $(".faq_reply_container").slideUp(); open = $(this).nextAll("first:faq_reply_container"); open.slideToggle(); }); }); 

 .faq_container{width:100%; height:auto; display:flex; flex-direction:column;} .faq_question_reply_container{width:100%; height:auto; outline:2px solid #00BDE7; margin:5px 0px 5px 0px; } .faq_question_container{outline:2px solid #00BDE7; background-color:white; width:100%; height:45px; display:flex; align-items:center; padding-left:15px; justify-content:space-between;} .faq_question{font-family:Rubik; font-weight:600; color:rgba(0, 0, 0, 1.0); font-size:18px;} .faq_show_icon{width:39px; height:39px; outline:1px solid rgba(0, 0, 0, 0.2); margin-right:3px; display:flex; justify-content:center; align-items:center; font-weight:900; color:rgba(0, 0, 0, 1.0); font-size:50px;} .faq_show_icon:hover{cursor:pointer; background-color:#F5F5F5;} .faq_reply_container{width:100%; height:auto; padding:15px 45px 15px 15px; background-color:#F5F5F5;} .faq_reply{font-family:Patua One; color:rgba(0, 0, 0, 0.8); font-size:15px; line-height:23px;} .article_container{width:77%; height:100%; padding:15px 15px 15px 15px; overflow:hidden;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="article_container" style=""> <div class="faq_container" style=""> <div class="faq_question_reply_container" style=""> <div class="faq_question_container" style=""> <span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span> <div class="faq_show_icon" style="">+</div> </div> <div class="faq_reply_container" style=""> <p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p> </div> </div> <div class="faq_question_reply_container" style=""> <div class="faq_question_container" style=""> <span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span> <div class="faq_show_icon" style="">+</div> </div> <div class="faq_reply_container" style=""> <p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p> </div> </div> <div class="faq_question_reply_container" style=""> <div class="faq_question_container" style=""> <span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span> <div class="faq_show_icon" style="">+</div> </div> <div class="faq_reply_container" style=""> <p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p> </div> </div> </div> </div> 

Answer 1

将$($this)更改$($this) $(this) ：

open = $(this).nextAll("first:faq_reply_container");

您提到：

“我想做的是，当单击加号图标时，所有打开的答复框必须向上滑动，而我单击的那个必须向上滑动”

在事件监听器中编写以下行：

$(this).closest('.faq_question_reply_container')
       .find('.faq_reply_container')
       .slideDown();

---

 $(document).ready(function(){ $(".faq_reply_container").slideUp(); $(".faq_show_icon").click(function(){ $(".faq_reply_container").slideUp(); $(this).closest('.faq_question_reply_container') .find('.faq_reply_container') .slideDown(); }); }); 

 .faq_container{width:100%; height:auto; display:flex; flex-direction:column;} .faq_question_reply_container{width:100%; height:auto; outline:2px solid #00BDE7; margin:5px 0px 5px 0px; } .faq_question_container{outline:2px solid #00BDE7; background-color:white; width:100%; height:45px; display:flex; align-items:center; padding-left:15px; justify-content:space-between;} .faq_question{font-family:Rubik; font-weight:600; color:rgba(0, 0, 0, 1.0); font-size:18px;} .faq_show_icon{width:39px; height:39px; outline:1px solid rgba(0, 0, 0, 0.2); margin-right:3px; display:flex; justify-content:center; align-items:center; font-weight:900; color:rgba(0, 0, 0, 1.0); font-size:50px;} .faq_show_icon:hover{cursor:pointer; background-color:#F5F5F5;} .faq_reply_container{width:100%; height:auto; padding:15px 45px 15px 15px; background-color:#F5F5F5;} .faq_reply{font-family:Patua One; color:rgba(0, 0, 0, 0.8); font-size:15px; line-height:23px;} .article_container{width:77%; height:100%; padding:15px 15px 15px 15px; overflow:hidden;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="article_container" style=""> <div class="faq_container" style=""> <div class="faq_question_reply_container" style=""> <div class="faq_question_container" style=""> <span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span> <div class="faq_show_icon" style="">+</div> </div> <div class="faq_reply_container" style=""> <p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p> </div> </div> <div class="faq_question_reply_container" style=""> <div class="faq_question_container" style=""> <span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span> <div class="faq_show_icon" style="">+</div> </div> <div class="faq_reply_container" style=""> <p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p> </div> </div> <div class="faq_question_reply_container" style=""> <div class="faq_question_container" style=""> <span class="faq_question" style="">¿Esto es una prefunta seria asi que espero una respuesta seria?</span> <div class="faq_show_icon" style="">+</div> </div> <div class="faq_reply_container" style=""> <p class="faq_reply" style="">Waynabox es una nueva forma de viajar por Europa. Te escaparás durante tres días a una ciudad sorpresa desde 150€, con vuelos de ida y vuelta y alojamiento incluidos.Descarta las ciudades que no quieres visitar (una gratuïta y, las siguientes, por 5€ cada una) y haz tu reserva. Dos días antes de salir, te mandaremos los billetes y descubrirás cuál es tu ciudad. ¡Atrévete a vivir tu próxima aventura este fin de semana!</p> </div> </div> </div> </div>