问题描述
我有一个div列表，每个div都有一个按钮。 当我单击按钮时，将显示一个文本，而当我单击按钮时，该信息将隐藏，并带有焦点突出功能。 如果我打开了一个按钮，并且想单击一个父按钮，那很好，打开的按钮会关闭，而我按下的新按钮会同时打开。 问题是当我要使用下一个按钮执行此操作时，它不会同时执行两项操作（请集中精力并单击新按钮）。 在线示例进行检查： ：
$(".p1").hide(); $(".p1-img").hide(); $(".btn1").click(function() { if ($.trim($(this).text()) === 'Más detalles') { $(this).text('Menos detalles'); } else { $(this).text('Más detalles'); } $(this).focusout(function() { $(".p1").hide(); $(".p1-img").hide(); $(this).text('Más detalles'); }); var $p1 = $(this).next(".p1").toggle(); var $p1img = $(this).parents().eq(4).find(".p1-img").toggle(); $(".p1").not($p1).hide(); $(".p1-img").not($p1img).hide(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="event-56092" class="ect-list-post ect-featured-event data-parent-post-id=" 56053 ""=""> <div class="ect-list-post-left "> <div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;"> <a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark"> <div class="ect-list-date"> <div class="ect-date-area default-schedule"> <span class="ev-day">25</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span> </div> </div> </a> </div> </div> <div class="ect-list-post-right"> <div class="ect-list-post-right-table"> <div class="ect-list-description"> <h2 class="ect-list-title"> <a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a> </h2> <button class="btn1 button-more svg">Más detalles</button> <div class="p1" style="display: none;"> <div class="ect-event-content"> <p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campa?a de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p> <a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" class="ect-events-read-more" rel="bookmark">Ir al evento ?</a> </div> </div> </div> <div class="p1-venue"> <div class="ect-list-venue default-venue"> <span class="ect-icon"> <i class="fa fa-map-marker" aria-hidden="true"></i> </span> <span class="ect-venue-details ect-address"> <a href="https://www.lagaleramagazine.es/lugar/area-de-atencion-al-mayor-ayuntamiento-de-badajoz/" title="Area de atención al Mayor , Ayuntamiento de Badajoz">Area de atención al Mayor , Ayuntamiento de Badajoz</a>, <span class="tribe-address"> <span class="tribe-locality">Badajoz</span> <span class="tribe-delimiter">,</span> <abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr> <span class="tribe-country-name">Espa?a</span> </span> </span> <span class="ect-google"> <a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a> </span> <div class="ect-rate-area"> <span class="ect-rate-icon"> <i class="fa fa-money" aria-hidden="true"></i> </span> <span class="ect-rate">Gratuito</span> </div> </div> </div> </div> </div> </div>
1楼
bhansa
0
已采纳
2019-02-25 14:21:43
我建议您仅可以更方便地删除焦点突出功能并使用click事件。
请检查以下示例。
注意 ：focusout对您不起作用的原因是，您要定位一个全局类.p1并将其隐藏，这实际上也隐藏了其他p标签。
$(".btn1").click(function() { if ($.trim($(this).text()) === 'Más detalles') { $(this).text('Menos detalles'); } else { $(this).text('Más detalles'); } var $p1 = $(this).next(".p1"); var $p1img = $(this).parents().eq(4).find(".p1-img"); $p1.toggle(); $p1img.toggle(); $(".p1").not($p1).hide(); $(".p1-img").not($p1img).hide(); });
.p1, .p1-img { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="event-55758" class="ect-list-post ect-featured-event data-parent-post-id=" 51063 ""=""> <div class="ect-list-post-left "> <div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/timthumb.jpg');background-size:cover;background-position:center center;"> <a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark"> <div class="ect-list-date"> <div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div> </div> </a> </div> </div> <div class="ect-list-post-right"> <div class="ect-list-post-right-table"> <div class="ect-list-description"> <h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" title="Exposición : “16 personajes que maravillan y … Miguel de Cervantes”." rel="bookmark">Exposición : “16 personajes que maravillan y … Miguel de Cervantes”.</a></h2> <button class="btn1 button-more svg">Más detalles</button> <div class="p1" style="display: none;"> <div class="ect-event-content"> <p>El próximo 11 de enero, se inaugurará en la Biblioteca Pública del Estado "Bartolomé J. Gallardo" de Badajoz , esta exposición que traza la vida literaria de Miguel de Cervantes(1547-1616), a través de un recorrido por su propia obra y acompa?ado de otros 16 personajes que conmemoran la muerte del autor, incluyendo la presencia del novelista en...</p> <a href="https://www.lagaleramagazine.es/agenda/exposicion-16-personajes-que-maravillan-y-miguel-de-cervantes/2019-02-26/" class="ect-events-read-more" rel="bookmark">Ir al evento ?</a></div> </div> </div> <div class="p1-venue"> <div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address"><span class="tribe-address"><span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr><span class="tribe-country-name">Espa?a</span></span> </span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span></div> </div> </div> </div> </div> <!-- second --> <div id="event-58349" class="ect-list-post ect-simple-event data-parent-post-id=" 58345 ""=""> <div class="ect-list-post-left "> <div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/02/cropped-32396-vegetables-1920x1200-photography-wallpaper.jpg');background-size:cover;background-position:center center;"> <a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Imagen del evento" alt="Magazine 1" rel="bookmark"> <div class="ect-list-date"> <div class="ect-date-area default-schedule"> <span class="ev-day">26</span> <span class="ev-mo">febrero</span> <span class="ev-yr">2019</span></div> </div> </a> </div> </div> <div class="ect-list-post-right"> <div class="ect-list-post-right-table"> <div class="ect-list-description"> <h2 class="ect-list-title"><a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" title="Come con la cabeza, no con la boca – Charlas para ni?os" rel="bookmark">Come con la cabeza, no con la boca – Charlas para ni?os</a></h2> <button class="btn1 button-more svg"><span>Más detalles</span></button> <div class="p1" style="display: none;"> <div class="ect-event-content"> <p>Fundación CB lanza de nuevo una campa?a para educar y concienciar a los ni?os y padres sobre la importancia de seguir unos hábitos alimenticios saludables. Por la ma?ana se ofrecerán las charlas a los alumnos y por la tarde a los padres interesados en ampliar conocimientos sobre buenos alimentos, enfermedades relacionadas con una mala alimentación,...</p> <a href="https://www.lagaleramagazine.es/agenda/come-con-la-cabeza-no-con-la-boca-charlas-para-ninos/2019-02-26/" class="ect-events-read-more" rel="bookmark">Ir al evento ?</a></div> </div> </div> <div class="p1-venue"> <div class="ect-list-venue default-venue"><span class="ect-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> <span class="ect-venue-details ect-address"><a href="https://www.lagaleramagazine.es/?post_type=tribe_venue&p=41948" title="Fundación CB">Fundación CB</a>,<span class="tribe-address"><span class="tribe-street-address">C/ Pablo Sorozábal, s/n?1,</span> <br> <span class="tribe-locality">Badajoz</span><span class="tribe-delimiter">,</span><abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr><span class="tribe-postal-code">06006</span><span class="tribe-country-name">Espa?a</span></span> </span><span class="ect-google"><a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=C%2F+Pablo+Soroz%C3%A1bal%2C+s%2Fn%C2%BA1%2C+Badajoz+Badajoz+06006+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a></span> <div class="ect-rate-area"><span class="ect-rate-icon"><i class="fa fa-money" aria-hidden="true"></i></span> <span class="ect-rate">Gratuito</span></div> </div> </div> </div> </div> </div>