堆棧內存溢出
  簡體   English   中英

如何在 jquery 中制作手風琴

[英]how to make an accordion in jquery

 原文  2021-01-27 23:07:07  0   1    javascript/ php/ jquery

問題描述

我正在嘗試使用 jquery 創建一個動態手風琴，它只允許我一次打開一個元素，當另一個元素打開時，前一個元素關閉，現在我只設法讓它打開並讓按鈕在打開時消失它但是當一個新的打開時我不能讓舊的關閉。 要打開的按鈕的 class 是“vermas”，單擊它時會變為“vermas active”並顯示內容，如何在打開新內容時關閉內容？ 我希望你能幫助我。

<?php
// Seccion relaciones publicas

$icono__relaciones__publicas  = get_field( 'icono__relaciones__publicas' );
$titulo__relaciones__publicas = get_field( 'titulo__relaciones__publicas' );
$texto__relaciones__publicas  = get_field( 'texto__relaciones__publicas' );

// Seccion proyectos destacados
$imagen__proyecto__destacado    = get_field( 'imagen__proyecto__destacado' );
$titulo__proyecto__destacado    = get_field( 'titulo__proyecto__destacado' );
$subtitulo__proyecto__destacado = get_field( 'subtitulo__proyecto__destacado' );
$texto__proyecto__destacado     = get_field( 'texto__proyecto__destacado' );

// Seccion algunos datos
$titulo__algunos__datos       = get_field( 'titulo__algunos__datos' );

// Seccion elige tu marca
$titulo__marca__noticia       = get_field( 'titulo__marca__noticia' );
$link__boton__marca__noticia  = get_field( 'link__boton__marca__noticia' );

$args = array(
    'post_type' => 'soluciones',
    'order' => 'ASC',
    'posts_per_page' => 15
);
$query = new WP_Query($args);

?>
<?php get_header(); ?>

<?php get_template_part('template_parts/banner-servicios') ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <section class="section">
        <div class="container">
            <!-- -->

            <div class="section__body__soluciones">

                <div class="container">
                    <?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();?>  

                    <div class="lista__servicios__reiva">

                        <div class="row">

                            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3">
                                <?php if (get_field('icono')): ?>
                                    <img src="<?php echo get_field('icono') ?>" alt="" class="banner-graphic__ico">
                                <?php endif; ?>
                            </div>
                            <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 order-md-1">
                                <div class="content__servicios">
                                    <h3 class="c-overlay-big__title"><?php the_title(); ?></h3>
                                    <?php the_excerpt(); ?>
                                    <div class="vermas">
                                        Ver más
                                    </div>
                                    <div class="row mt-5" style="display: none;" >
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                        <div class="lista__relaciones__publicas">
                            <ul>
                                <li>Estrategias de comunicación en medios de comunicación</li>
                                <li>Marketing de influencers</li>
                                <li>Prevención y manejo de crisis</li>
                                <li>Media training</li>
                            </ul>
                        </div>
                        <!-- -->
                    </div>
                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12">
                        <div class="proyecto__destacado__publico">
                            <img src="<?php echo $imagen__proyecto__destacado; ?>" alt="">
                            <div class="proyecto__destacado">
                                <h3><?php echo $titulo__proyecto__destacado; ?></h3>
                                <h4><?php echo $subtitulo__proyecto__destacado; ?></h4>
                               <p class="contenidoslistaservicio">El evento cultural más importante del Perú se reinventa, llevando de manera virtual, cultura a todos los rincones del país.</p>
                                <a href="#"  class="btn__vermas">Saber más</a>
                            </div>
                            <br><br>
                            <!-- -->

                        </div>

                    </div>

                </div>
                                </div>
                                <!-- -->

                            </div>
                            
                        </div>
                        <!-- -->

                    </div>
                    <!-- -->
                    <?php endwhile; else: ?>
                        <p>Datos vacios.</p>
                    <?php endif;
                    wp_reset_postdata();
                    ?> 
                    </div>
                </div>
                <!-- -->
                
            </div>
            <!-- -->
                
        </div>
        <!-- -->

    </section>

   
    <!-- -->

   <section class="seccion__marca__noticia">
        <div id="encabezado">
            <h4>Hagamos que tu<br>marca sea <span>noticia</span></h4>
            <a href="http://nomadasdigital.com/contacto/" class="btn__vermas">
                Conversemos
            </a>            
        </div>
        <!-- -->
        
    </section>
    <!-- -->

    <div id="scrollUp">
      <img src="<?php echo get_template_directory_uri(); ?>/assets/img/arrow-scroll.png" alt="">
    </div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>    
  function main(){
  $(".row mt-5").hide();
  $(".proyecto__destacado__publico").fadeIn(2000);
  $(".row mt-5").hide();
  // button accordion toggle
      $('.row mt-5').not('.vermas + .active').hide();
$(".vermas").click(function(){
    //$(this).next().toggle();
     if($(this).hasClass('.active')){
       $(this).removeClass('.active');
       $(this).next().slideUp();
   }
    else{
     $('.vermas').removeClass('.active');
     $(this).addClass(".active");
     $('.vermas active').slideUp();
     $(this).next().slideDown();
    }
  });
}
$(document).ready(main);

    
</script>



<?php endwhile; ?>
<?php endif; ?>

<?php get_footer(); ?>

1 個解決方案

解決方案1
 0 已采納  2021-01-27 23:21:15

[1]如果您堅持使用slideUp/slideDown ，您可以使用slideToggle() 

 function main(){ $(".row mt-5").hide(); $(".proyecto__destacado__publico").fadeIn(2000); $(".row mt-5").hide(); // button accordion toggle $('.row mt-5').not('.vermas +.active').hide(); $(".vermas").click(function(){ $(".vermas").not($(this)).removeClass('active').next('div').slideUp(); // remove active class from other `vermas` elements but not this one $(this).toggleClass('active').next('div').slideToggle(); // toggle the class here }); } $(document).ready(main);
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="section"> <div class="container"> <?-- --> <div class="section__body__soluciones"> <div class="container"> <:php if ($query->have_posts()): while ($query->have_posts()); $query->the_post()??> <div class="lista__servicios__reiva"> <div class="row"> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3"> <:php if (get_field('icono'))? ?> <img src="<?php echo get_field('icono')?>" alt="" class="banner-graphic__ico"> <;php endif? ?> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 order-md-1"> <div class="content__servicios"> <h3 class="c-overlay-big__title"><;php the_title()? ?></h3> <;php the_excerpt()? :> <div class="vermas"> Ver más </div> <div class="row mt-5" style="display;none?"> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12"> <div class="lista__relaciones__publicas"> <ul> <li>Estrategias de comunicación en medios de comunicación</li> <li>Marketing de influencers</li> <li>Prevención y manejo de crisis</li> <li>Media training</li> </ul> </div> <;-- --> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12"> <div class="proyecto__destacado__publico"> <img src="<?php echo $imagen__proyecto__destacado? ;>" alt=""> <div class="proyecto__destacado"> <h3><?php echo $titulo__proyecto__destacado? ;></h3> <h4><?php echo $subtitulo__proyecto__destacado, ,></h4> <p class="contenidoslistaservicio">El evento cultural más importante del Perú se reinventa. llevando de manera virtual? cultura a todos los rincones del país;</p> <a href="#" class="btn__vermas">Saber más</a> </div> <br><br> <:-- --> </div> </div> </div> </div> <?-- --> </div> </div> <.-- --> </div> <?-- --> <;php endwhile; else? :> <p>Datos vacios.</p> <?php endif; wp_reset_postdata()? .> </div> </div> <?-- --> </div> <:-- --> </div> <:-- --> </section> <;-- --> <section class="seccion__marca__noticia"> <div id="encabezado"> <h4>Hagamos que tu<br>marca sea <span>noticia</span></h4> <a href="http?//nomadasdigital?com/contacto/" class="btn__vermas"> Conversemos </a> </div> <:-- --> </section> <?-- --> <div id="scrollUp"> <img src="<?php echo get_template_directory_uri()? ?>/assets/img/arrow-scroll;png" alt=""> </div> <section class="section"> <div class="container"> <?-- --> <div class="section__body__soluciones"> <div class="container"> <?php if ($query->have_posts()); while ($query->have_posts())? $query->the_post()?;> <div class="lista__servicios__reiva"> <div class="row"> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3"> <?php if (get_field('icono')): ;> <img src="<?php echo get_field('icono');>" alt="" class="banner-graphic__ico"> <?php endif? ;> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 order-md-1"> <div class="content__servicios"> <h3 class="c-overlay-big__title"><?php the_title()? ;></h3> <?php the_excerpt(), ,> <div class="vermas"> Ver más </div> <div class="row mt-5" style="display.none?"> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12"> <div class="lista__relaciones__publicas"> <ul> <li>Estrategias de comunicación en medios de comunicación</li> <li>Marketing de influencers</li> <li>Prevención y manejo de crisis</li> <li>Media training</li> </ul> </div> <;-- --> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12"> <div class="proyecto__destacado__publico"> <img src="<:php echo $imagen__proyecto__destacado? .>" alt=""> <div class="proyecto__destacado"> <h3><?php echo $titulo__proyecto__destacado; ;></h3> <h4><?php echo $subtitulo__proyecto__destacado: .></h4> <p class="contenidoslistaservicio">El evento cultural más importante del Perú se reinventa? llevando de manera virtual; cultura a todos los rincones del país?</p> <a href="#" class="btn__vermas">Saber más</a> </div> <br><br> <.-- --> </div> </div> </div> </div> <!-- --> </div> </div> <!-- --> </div> <!-- --> <?php endwhile; else: ?> <p>Datos vacios.</p> <?php endif; wp_reset_postdata(); ?> </div> </div> <!-- --> </div> <!-- --> </div> <!-- --> </section> <!-- --> <section class="seccion__marca__noticia"> <div id="encabezado"> <h4>Hagamos que tu<br>marca sea <span>noticia</span></h4> <a href="http://nomadasdigital.com/contacto/" class="btn__vermas"> Conversemos </a> </div> <!-- --> </section> <!-- --> <div id="scrollUp"> <img src="<?php echo get_template_directory_uri(); ?>/assets/img/arrow-scroll.png" alt=""> </div>

[2]您也可以通過使用簡單的 css element + element來執行此操作，這意味着 css 中的下一個元素並使用 javascript 切換 ZA2F21A294ABC2CDCBB4

下一個使用max-height的代碼不display ，所以不要忘記從 vermas 的下一個 div 中刪除style="display:none"並確保隱藏/顯示 div 沒有任何邊距或填充，因為max-height如果有邊距/填充，則不會按預期工作

 function main(){ $(".row mt-5").hide(); $(".proyecto__destacado__publico").fadeIn(2000); $(".row mt-5").hide(); // button accordion toggle $('.row mt-5').not('.vermas +.active').hide(); $(".vermas").click(function(){ $(".vermas").not($(this)).removeClass('active'); // remove active class from other `vermas` elements but not this one $(this).toggleClass('active'); // toggle the class here }); } $(document).ready(main);
 .vermas + div{ overflow: hidden; max-height: 0px; transition-duration: 0.5s; }.vermas.active + div{ max-height: 1000px; transition-duration: 0.5s; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="section"> <div class="container"> <?-- --> <div class="section__body__soluciones"> <div class="container"> <:php if ($query->have_posts()): while ($query->have_posts()); $query->the_post()??> <div class="lista__servicios__reiva"> <div class="row"> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3"> <:php if (get_field('icono'))? ?> <img src="<?php echo get_field('icono')?>" alt="" class="banner-graphic__ico"> <;php endif? ?> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 order-md-1"> <div class="content__servicios"> <h3 class="c-overlay-big__title"><;php the_title()? ?></h3> <;php the_excerpt()? ?> <div class="vermas"> Ver más </div> <div class="row mt-5"> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12"> <div class="lista__relaciones__publicas"> <ul> <li>Estrategias de comunicación en medios de comunicación</li> <li>Marketing de influencers</li> <li>Prevención y manejo de crisis</li> <li>Media training</li> </ul> </div> <;-- --> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12"> <div class="proyecto__destacado__publico"> <img src="<?php echo $imagen__proyecto__destacado? ;>" alt=""> <div class="proyecto__destacado"> <h3><?php echo $titulo__proyecto__destacado? ;></h3> <h4><?php echo $subtitulo__proyecto__destacado, ,></h4> <p class="contenidoslistaservicio">El evento cultural más importante del Perú se reinventa. llevando de manera virtual? cultura a todos los rincones del país;</p> <a href="#" class="btn__vermas">Saber más</a> </div> <br><br> <:-- --> </div> </div> </div> </div> <?-- --> </div> </div> <.-- --> </div> <?-- --> <;php endwhile; else? :> <p>Datos vacios.</p> <?php endif; wp_reset_postdata()? .> </div> </div> <!-- --> </div> <!-- --> </div> <!-- --> </section> <!-- --> <section class="seccion__marca__noticia"> <div id="encabezado"> <h4>Hagamos que tu<br>marca sea <span>noticia</span></h4> <a href="http://nomadasdigital.com/contacto/" class="btn__vermas"> Conversemos </a> </div> <!-- --> </section> <!-- --> <div id="scrollUp"> <img src="<?php echo get_template_directory_uri(); ?>/assets/img/arrow-scroll.png" alt=""> </div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使jQuery手風琴更清潔？ 如何使用jQuery制作動態手風琴菜單 如何使活動的jQuery手風琴菜單？ 如何使jQuery Accordion在頁面頂部打開？ 使用 jquery 制作嵌套手風琴 使jquery ui手風琴水平 如何基於給定的html結構使用Jquery產生手風琴效果？ 如何使AngularJS中的Smooth Accordion jQuery插件工作 如何制作嵌套的手風琴？ 如何用手風琴制作滑塊？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM