¿Cómo se establece abierto y cierre del bloque diveciente específico solo usando JavaScript? -- javascript campo con jquery campo con html campo con css camp Relacionados El problema

How Set Open and Close of specific div block only using Javascript?


1
vote

problema

Español

Por favor, consulte este enlace https://jsfiddle.net/bhargavjashi/sl8f6bkr/3/

Estoy tratando de configurar un bloque haciendo clic en Continuar leyendo y cerrando el bloque haciendo clic en Mostrar menos.

Ahora que normalmente está funcionando bien, pero el problema es cuando estoy abriendo dos bloques por ejemplo. 1 y 2 puntos están abiertos y si estoy haciendo clic en Mostrar menos de punto, no 1, luego cerrará el primer bloque, pero también cambiará el estado de Mostrar menos para continuar la lectura del bloque 2.

Entonces, ¿cómo puedo configurar que haciendo clic en Mostrar menos, solo cerrará específico ese bloque solo.

  jQuery(".show-slide-wrp").on("click", function(event){     event.preventDefault();     var slidindWrp = jQuery(this).data("slide");     console.log(slidindWrp);     jQuery(slidindWrp).slideDown();     jQuery(this).hide(); });   jQuery(".hide-slide-wrp").on("click", function(event){     event.preventDefault();     var $this = jQuery(this);     var closeDiv = $this.closest(".sliding-wrp");     jQuery(".show-slide-wrp").show();     closeDiv.slideUp();     jQuery('html, body').animate({         scrollTop: closeDiv.offset().top - 300     }, 500);  });  // scoll by id jQuery(".contenttable a").click(function(event) {     event.preventDefault();     var $this = jQuery(this);     var getScrollId = $this.attr("href");       console.log(getScrollId);    jQuery('html, body').animate({         scrollTop: jQuery(getScrollId).offset().top     }, 500); });   
Original en ingles

Please check this Link https://jsfiddle.net/bhargavjoshi/sL8f6bkr/3/

I am trying to setup Open a block by clicking continue reading and closing the block by clicking show less.

now it's normally working fine but the issue is when I am opening two blocks for eg. 1 and 2 point are open and If am clicking show less of point no 1 then it will close first block but also change the status of show less to continue reading of block 2.

so how can I set that by clicking show less it will close only specific that block only.

jQuery(".show-slide-wrp").on("click", function(event){     event.preventDefault();     var slidindWrp = jQuery(this).data("slide");     console.log(slidindWrp);     jQuery(slidindWrp).slideDown();     jQuery(this).hide(); });   jQuery(".hide-slide-wrp").on("click", function(event){     event.preventDefault();     var $this = jQuery(this);     var closeDiv = $this.closest(".sliding-wrp");     jQuery(".show-slide-wrp").show();     closeDiv.slideUp();     jQuery('html, body').animate({         scrollTop: closeDiv.offset().top - 300     }, 500);  });  // scoll by id jQuery(".contenttable a").click(function(event) {     event.preventDefault();     var $this = jQuery(this);     var getScrollId = $this.attr("href");       console.log(getScrollId);    jQuery('html, body').animate({         scrollTop: jQuery(getScrollId).offset().top     }, 500); }); 
           
   
   

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

El problema está aquí:

  return5  

Editado: Hice una pluma: para no agregar atributos manualmente a su HTML como un objetivo de datos a medida que su página se ve como HTML estática, agrego un objetivo de datos al enlace "Mostrar menos" cuando el usuario haga clic en en el enlace "SALIR LEER". Luego, cuando hago clic en el enlace "Mostrar menos", sé qué enlace "seguir leyendo" para ocultar ¿Ves lo que quiero decir?

Primero: cuando hace clic en "Mantener lectura" Agregar un atributo de destino de datos a la etiqueta de cierre derecho:

  return6  

Segundo: cuando hace clic en la etiqueta de cierre: Ocultar la etiqueta "Mantener leyendo":

  return7  
 

The problem is here :

    jQuery(".hide-slide-wrp").on("click", function(event){     event.preventDefault();     var $this = jQuery(this);     var closeDiv = $this.closest(".sliding-wrp");     jQuery(".show-slide-wrp").show(); // You show all "Keep reading" occurences     closeDiv.slideUp();     jQuery('html, body').animate({         scrollTop: closeDiv.offset().top - 300     }, 500);  }); //you could put a data-target on theses elements : <div class="hide-slide-wrp" data-target=".sliding7"><a>Show less</a></div> 

edited : I made a pen : in order not to manually add attributes to your html like a data-target as your page looks like static html, I add a data-target to the "show less" link when the user click on the "keep reading" link. then when I click on the "Show less" link I know which "keep reading" link to hide do you see what I mean ?

First : when you click on "Keep readin" add a data-target attribute to the right closing tag :

 var $closingTag = $(this).closest(".benefixbox").find(".hide-slide-wrp"); 

Second : when you click on the closing tag : hide the "Keep reading" tag :

var dataTarget = $(this).data("target");// here is my target : keep reading     jQuery("[data-slide='"+dataTarget+"']").show(); // we show the link keep reading again because we know what its data-slide is 
 
 
       
       

Relacionados problema

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos