Question

我评论了一下，我将3行各分为两个div，其中包含当您单击它们时显示信息的按钮。

我想要的是让他们像“ slideDown”这样的效果，这样，当您按下按钮时，将显示您的信息，而在再次按下它时，该信息将被隐藏。另一方面，我希望当一个按钮打开并单击另一个按钮时，隐藏从活动按钮可见的信息，并显示另一个被激活的信息。

问题是，如果我打开并关闭相同的按钮，它将再次打开。我该如何解决？

HTML ：（我只添加了两个按钮，以免代码太长）

                <row class="col-xs-12" id="row1">

                    <?php

                        $item = null;
                        $valor = null;

                        $categorias = ControladorProductos::ctrMostrarCategorias($item, $valor);

                        foreach ($categorias as $key => $value) {

                            if ($value["categoria"] == "CLÁSICO") {

                            echo '<div class="col-xs-6 btnCategoriasMobile" id="btnClasico">

                                    <button class="btn btn-default backColor btn-block btnCategoriasMobile">
                                        <a class="pixelCategorias">'.$value["categoria"].'</a>

                                    </button>

                                    <div class="infoSubCategorias" id="subcatClasico"';

                                    $item = "id_categoria";

                                    $valor = $value["id"];

                                    $subcategorias = ControladorProductos::ctrMostrarSubCategorias($item, $valor);

                                    foreach ($subcategorias as $key => $value) {

                                            echo '<li><center><a href="'.$url.$value["ruta"].'" class="pixelSubCategorias">'.$value["subcategoria"].'</a></center></li>';
                                        }   

                                    echo '</div>
                                    </div>';

                            } else if ($value["categoria"] == "LIGHT") {

                            echo '<div class="col-xs-6 btnCategoriasMobile" id="btnLight">

                                    <button class="btn btn-default backColor btn-block btnCategoriasMobile">
                                        <a class="pixelCategorias">'.$value["categoria"].'</a>

                                    </button>

                                    <div class="infoSubCategorias" id="subcatLight"';

                                    $item = "id_categoria";

                                    $valor = $value["id"];

                                    $subcategorias = ControladorProductos::ctrMostrarSubCategorias($item, $valor);

                                    foreach ($subcategorias as $key => $value) {

                                            echo '<li><center><a href="'.$url.$value["ruta"].'" class="pixelSubCategorias">'.$value["subcategoria"].'</a></center></li>';
                                        }   

                                    echo '</div>
                                    </div>';

                            }

                        }

                    ?>

                </row>

JS：

$("#btnClasico").click(function(){
    $('.infoSubCategorias').slideUp();
    $("#subcatClasico").slideToggle();
 });

$("#btnLight").click(function(){
    $('.infoSubCategorias').slideUp();
    $("#subcatLight").slideToggle();
 });

$("#btnSodio").click(function(){
    $('.infoSubCategorias').slideUp();
    $("#subcatSodio").slideToggle();
 });

$("#btnFibras").click(function(){
    $('.infoSubCategorias').slideUp();
    $("#subcatFibras").slideToggle();
 });

$("#btnVeggie").click(function(){
    $('.infoSubCategorias').slideUp();
    $("#subcatVeggie").slideToggle();
 });

$("#btnCombos").click(function(){
    $('.infoSubCategorias').slideUp();
    $("#subcatCombos").slideToggle();
 });

Answer 1

在将其向上滑动之前，应使用.not()方法从匹配的$('.infoSubCategorias')集中排除目标元素。

$("#btnCombos").click(function(){
    var target = $("#subcatCombos")
    $('.infoSubCategorias').not(target).slideUp(); 
    target.slideToggle();
 });

关闭按钮时，它会使用slideToggle重新打开

1 个答案: