Cómo alternar la pantalla: ninguna, pantalla: bloque

4

$(document).ready(function() {
  ('.button').click(function() {
    let item = $(this).closest('item');
    if (item.css.('display') === 'none') {
      item.show();
      item.css('display', 'block');
    } else if (item.css.('display') === 'block') {
      item.hide();
      item.css('display', 'none');
    }
  });
});
.item {
  display: none;
}
<div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>

El objetivo es ocultar y mostrar el div actual al hacer clic en el botón. tengo el mismo contenedor con los mismos nombres de clase. Si utilizo simplemente el botón de alternancia, al hacer clic en el botón, todos los demás contenedores se alternan. En este caso, solo se debe mostrar y ocultar el contenedor actual. El primer hijo div del contenedor de la clase se muestra inicialmente y el segundo hijo div está oculto / se muestra: ninguno. al hacer clic en el botón, se muestra el segundo div child, la pantalla: none cambia a display: block. El código aquí parece no funcionar.

4
  • Hay varios problemas con su código ... .closest('')solo busca nodos principales, por lo que en realidad no devuelve nada. Además, closest('.item')le falta el .para indicar que es la clase que está buscando.
    Levidps
    18 de enero de 2018 a las 5:10
  • también te falta el nombre de la función ( $) de una de tus llamadas de jquery ... 18 de enero de 2018 a las 5:10
  • Como está usando jQuery, es posible que desee usar el método toggle() api.jquery.com/toggle
    Adriano
    18 de enero de 2018 a las 5:10
  • No necesita ambos hide/showy css. ¿Qué opinas hidey showhaces otros que cambien el CSS?
    Barmar
    18 de enero de 2018 a las 5:22
6

Utilice .siblings ()

Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.

Fragmento de trabajo: -

$(document).ready(function() {
  $('.button').click(function() {
    $(this).siblings(".item").toggle();
  });
});
.item {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>
2

Use parent()para encontrar el elemento de clic del botón actual y luego busque la .itemclase en ese contenedor y simplemente use fadeToggle()para ocultar y mostrar el elemento como se muestra a continuación.

$(document).ready(function(){
    $('.button').click(function(){
        $(this).parent().find(".item").fadeToggle();
    });
});
.item{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> 
    <button class="button">Click</button>
    <div class="front">front page</div> 
    <div class="item">
        This is a paragraph with little content.
        This is another small paragraph.
    </div>
</div>
0
0

puede alternar basura con el método de alternancia jquery.

setInterval(()=>$("h1").toggle(), 50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>hello</h1>
0

Debe usar $(this).parent().find(":not(.button)"), para alternar todo dentro del contenedor que no sea el botón:

$(document).ready(function() {
  $('.button').click(function() {
    $(this).parent().find(":not(.button)").toggle();
  });
});
.front,
.item {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>
0

Usted sólo puede desencadenar los .toggle(), .slideToggle()o .fadeToggle()fuctions en vez de comprobar la visibilidad, y que haría uso de la .siblings('.item').first()de encontrar el elemento adecuado en función de su código HTML y JS originales.

$('.button').click(function() {
  let item = $(this).siblings('.item').first();
  item.slideToggle();
});
.item {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item hidden">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>
0

Su código tiene algunos errores como css.("display")no es ninguna función como en JQuery.

Puede utilizar cualquiera de estas formas para resolver su problema,

$(function(){

$('.button').on("click",function(){

var item = $(this).next("div").next('.item'); // For second next
 //var item = $(this).siblings('.item'); // By siblings() function
//var item = $(this).next().closest('.item'); // By siblings() function
item.toggle();
});

});
0

Usar alternar

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div.item").toggle(1000);
    });
});
</script>
<style>.item {
  display: none;
 }</style>
</head>
<body>

<div class="container"> 
   
<button>Hide</button>
    <div class="front">front page</div> 
    <div class="item">
        This is a paragraph with little content.
        This is another small paragraph.
    </div>
</div>

</body>
</html>
0
<script>
$(document).ready(function(){
    $(".button").click(function(){
        $(".front").toggle();
        $(".item").toggle();
    });
});
</script>
<style type="text/css">
    .item{display: none;}
</style>
<button class="button">Click</button> 
<div class="front">front page</div> 
<div class="item">
    This is a paragraph with little content.
    This is another small paragraph.
</div>