3

estoy trabajando sobre una maqueta, tengo cierta idea de como proceder pero me complique al hacerlo. Primero, es una estructura de cajas(divs) dentro de un contenedor, organizados a la cuadricula, al hacer click sobre 1 de ellos, este debe expandirse y los 2 que se encuentran en la misma fila deben hacerse mas chicos (sin afectar a las demás filas). Estructura al hacer click

Seguido de esto, cada cuadro tendrá un botón (visible al darle click) que expandirá una caja de texto con la descripción, el cuadro debe ser del tamaño del contenedor, anclado a la caja expandida(de donde se activa) y al abrir debe rodar las filas de abajo, en este caso necesitaría que al dar click en otra parte de la pagina (que no sea el cuadro abierto) se cierre el cuadro y se restablezcan los tamaños. descripcion expandida

//test toggle class
$(function() {
  var boxanime = $(".box-anime-cont .box ");
  boxanime.click(function() {
    boxanime.removeClass("box-expand");
    boxanime.removeClass("box-ret");
    $(this).addClass("box-expand");
    $(this).removeClass("box-ret");
    boxanime.addClass("box-ret");
  });
});


//fade box-anime-detail
$(".btn-dt-anime").on("click", function(event) {
  if ($(".detail-anime-box").hasClass('open')) {
    $(".detail-anime-box").removeClass('open');
  } else {
    $(event.target).closest(".box-expand").children(".detail-anime-box").toggleClass('open');
  }
});
.detail-anime-box {
  width: 0;
  height: 0;
  background: black;
  color: #fff;
}

.open {
  /*togggle box**/
  width: 230%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--box-->
<div class="box">
  <div class="box-anime">
    <span class="caps">12</span>
    <span class="tag-a">anime</span>
    <img src="img/anime2.jpg" alt="">
    <span class="titulo-box-anime">Titulo del anime</span>
    <i class="fa fa-angle-down btn-dt-anime"></i>
  </div>
  <div class="detail-anime-box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dolorem et quibusdam, sapiente ratione necessitatibus quos ea. Expedita, odit! Reprehenderit a, impedit ex illum consequatur, perferendis accusamus. Provident, eos, cum!
  </div>
</div>
<!--//box-->

1 respuesta 1

3

Es sencillo.

Para el primer requerimiento, cuando hagas el render (pintar el html) de las filas, asigna una clase que identifique las filas ej class="fila-1" y así sucevisamente para cada fila.

Para el render te sugiero estudiar templates en javascript, por ejemplo jsrender o dotjs, para que entiendas el concepto.

El html básico para un fila debería quedar así, usando bootstrap:

<div class="row>
    <div class="fila-1 animate pull-left" data-fila="1"></div><div class="fila-2 animate pull-left" data-fila="1"></div><div class="fila-3 animate pull-left" data-fila="1"></div>
</div>

Cada div, tiene la clase de la fila y el animate para crear el evento click. Adicionalmente definido como data tiene el número de la fila, para actuar solo sobre los elementos de fila, del elemento sobre el que se hace click.

Así defines el evento, si ya existen los divs en el dom:

$(".animate").click(function () {
    var fila = $(this).data("fila");
    $(".fila-" + fila).removeClass().addClass("close");
    $(this).addClass("open");
});

En las clases .open y .close, defines la presentación de los divs, tamaños .... Con esto tienes la primera funcionalidad.

Respecto a la segunda, puedes crear una fila vacía y oculta, como contenedor, en el evento click, adicional a lo anterior, haces el render de la fila, utilizando el id del elemento, adicionas otro data-id, envías el id, armas el html y lo cargas en el contenedor y muestras la fila, al seleccionar otra, puedes ocultar todas con la clase "fila-contenedor", que previamente has asignado a la fila vacía y oculta.

Espero haberte ayudado.

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.