0

de antemano gracias por su tiempo, tengo un problema con una tabla en la cual hago uso de colapse, cuando hago click en una fila me despliega la información, pero cuando hago click en otra, la ultima fila que se desplago no regresa a su lugar. este es mi codigo PHP.

if ($resultado->num_rows>0) {
        $salida.="<table class='table table-condensed'>
                <thead>
                    <tr id='titulo'>
                        <th scope='col'>Menu</th>
                        <th scope='col'>precio</th>
                    </tr>
                </thead>
                <tbody>";

        while ($fila = $resultado->fetch_assoc()) {
            $salida.="<tr data-toggle='collapse' data-target='#demo".$fila['ID']."'>
                        <td scope='row'>".$fila['nom_com']."</td>
                        <td>$".$fila['precio_com']."</td>
                    </tr>
                    <tr>
            <td colspan='6' class='hiddenRow'>
                <div id='demo".$fila['ID']."' class='collapse'>".$fila['descr_com']."</div>
            </td>
        </tr>";

        }

y se supone que con este código JS de poder ocultarse las otras tablas que no tienen el focus pero no se que estoy haciendo mal.

$('.collapse').on('show.bs.collapse', function () {
  $('.collapse.in').collapse('hide');
});

si les sirve mas de aquí saque el código

http://jsfiddle.net/QLfMU/2623/

1 respuesta 1

0

El problema es la version del bootstrap, ya no usa el $('.collapse.in') sino el $('.collapse.show'), por eso cuando le das click no encuentra un collapse con la clase in ya que no lo arma asi ahora, lo arma con la clase show:

$('.collapse').on('show.bs.collapse', function () {
  $('.collapse.show').collapse('hide');
});
.hiddenRow {
    padding: 0 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<table class='table table-condensed' style="border-collapse:collapse;">
  <thead>
    <tr id='titulo'>
      <th scope='col'>Menu</th>
      <th scope='col'>precio</th>
    </tr>
  </thead>
  <tbody>
    <tr data-toggle='collapse' data-target='#demo1'>
      <td scope='row'>1</td>
      <td>$250</td>
    </tr>
    <tr>
      <td colspan='2' class='hiddenRow'>
        <div id='demo1' class='collapse'>Descripcion 1</div>
      </td>
    </tr>
    <tr data-toggle='collapse' data-target='#demo2'>
      <td scope='row'>2</td>
      <td>$350</td>
    </tr>
    <tr>
      <td colspan='2' class='hiddenRow'>
        <div id='demo2' class='collapse'>Descripcion 2</div>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

1
  • efectivamente mi estimado funciona cuando lo ejecutamos en una hoja html, pero cuando lo tengo que hacer desde PHP, por que estoy usando ajax para realizar la consulta no me agarra el código, ya lo probé y es cierto lo de las versiones pero sigue sin darme resultados en php y no se por que :C, es que uso una hoja de html para llamar a mi consulta de php, el codigo php que puse esta en otra hoja, disculpa si no me doy a entender. Commented el 17 oct. 2018 a las 0:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.