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

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();
 });