1

Estoy usando un listado que lo uso de paginación, y es tan larga que me gustaría ocultar todos salvo la anterior, actual y siguiente. Por ej:

<ul>
    <li>1</li> <!-- Ocultar -->
    <li>2</li> <!-- Ocultar -->
    <li>3</li> <!-- Ocultar -->
    <li>4</li>
    <li class="active">5</li>
    <li>6</li>
    <li>7</li> <!-- Ocultar -->
    <li>8</li> <!-- Ocultar -->
    <li>9</li> <!-- Ocultar -->
    <li>10</li> <!-- Ocultar -->
</ul>

Otro ejemplo:

<ul>
    <li>1</li> <!-- Ocultar -->
    <li>2</li> <!-- Ocultar -->
    <li>3</li> <!-- Ocultar -->
    <li>4</li> <!-- Ocultar -->
    <li>5</li> <!-- Ocultar -->
    <li>6</li> <!-- Ocultar -->
    <li>7</li> <!-- Ocultar -->
    <li>8</li> <!-- Ocultar -->
    <li>9</li> <!-- Ocultar -->
    <li>10</li> <!-- Ocultar -->
    <li>11</li> <!-- Ocultar -->
    <li>12</li> <!-- Ocultar -->
    <li>13</li>
    <li class="active">14</li>
    <li>15</li>
    <li>16</li> <!-- Ocultar -->
    <li>17</li> <!-- Ocultar -->
    <li>18</li> <!-- Ocultar -->
    <li>19</li> <!-- Ocultar -->
    <li>20</li> <!-- Ocultar -->
    <li>21</li> <!-- Ocultar -->
    <li>22</li> <!-- Ocultar -->
    <li>23</li> <!-- Ocultar -->
    <li>24</li> <!-- Ocultar -->
    <li>25</li> <!-- Ocultar -->
</ul>

¿Se puede con nth u otro selector?

4
  • 1
    Creo que vas a tener que combinar esto con javascript/jquery para que te pueda funcionar ya que css permite seleccionar el elemento hermano que esta después del DOM pero no el que está antes Commented el 29 may. 2018 a las 21:40
  • eso se tiene que ser dinámico?, lo genera por un siclo for o solamente lo ingresas manual? Commented el 29 may. 2018 a las 21:41
  • ¿Cómo asignas la clase "active" al li? ¿Se le asigna desde el servidor o desde el cliente con JS? ¿Cómo de flexible es el modo en que se asigna esa clase? (p.e. ¿se podría crear la clase prev-active en lugar de active?)
    – Alvaro Montoro
    Commented el 29 may. 2018 a las 21:43
  • @tomillo, la acción pasa cuando haces click?, partes del primero siempre cierto? Commented el 29 may. 2018 a las 21:57

4 respuestas 4

1

Bueno lo mas rapido que se me ocurre es lo siguiente:

$().ready(()=>{
  $('li:not(.active)').css('display','none');
  $active = $('li.active');
  $active.next().css('display','');
  $active.prev().css('display','');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
    <li>1</li> <!-- Ocultar -->
    <li>2</li> <!-- Ocultar -->
    <li>3</li> <!-- Ocultar -->
    <li>4</li>
    <li class="active">5</li>
    <li>6</li>
    <li>7</li> <!-- Ocultar -->
    <li>8</li> <!-- Ocultar -->
    <li>9</li> <!-- Ocultar -->
    <li>10</li> <!-- Ocultar -->
</ul>

1
  • 1
    Muchas gracias. Funciona perfecto!
    – tomillo
    Commented el 29 may. 2018 a las 22:41
1

Según te ejemplo de me ocurre de la siguiente manera , usaremos algunas propiedades de jquery y usaremos lo siguiente:

  • eq que sirve para seleccionar un elemento como si fuera un array.
  • lt que va ha seleccionar todos los elementos de una lista anteriores del elemento.
  • gt que va ha seleccionar todos los elementos de una lista a partir de elemento que seleccionaremos con click
  • show que lo usaremos para mostrar los elementos.
  • hide que lo usaremos para ocultar los elementos.
  • index que lo usaremos para obtener la posición actual.

Con todo eso explicado vamos al resultado.!!!!

$("ul li").click(function(){
  
    $(this).addClass('active')
    var indice = $(this).index();
    if(indice == 0){
       $("ul li:eq("+(indice+1)+")").addClass("active").show();
       $("ul li:gt("+(indice+1)+")").removeClass("active").hide();
      
    }else{
      $("ul li:eq("+(indice+1)+")").addClass("active").show();
      $("ul li:eq("+(indice-1)+")").addClass("active").show();
    
      $("ul li:lt("+(indice-1)+")").removeClass("active").hide();
      $("ul li:gt("+(indice+1)+")").removeClass("active").hide();
    }
    
});
.active {
  color: white;
  background-color: red;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<ul>
  <li>1</li>
  <!-- Ocultar -->
  <li>2</li>
  <!-- Ocultar -->
  <li>3</li>
  <!-- Ocultar -->
  <li>4</li>
  <!-- Ocultar -->
  <li>5</li>
  <!-- Ocultar -->
  <li>6</li>
  <!-- Ocultar -->
  <li>7</li>
  <!-- Ocultar -->
  <li>8</li>
  <!-- Ocultar -->
  <li>9</li>
  <!-- Ocultar -->
  <li>10</li>
  <!-- Ocultar -->
  <li>11</li>
  <!-- Ocultar -->
  <li>12</li>
  <!-- Ocultar -->
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <!-- Ocultar -->
  <li>17</li>
  <!-- Ocultar -->
  <li>18</li>
  <!-- Ocultar -->
  <li>19</li>
  <!-- Ocultar -->
  <li>20</li>
  <!-- Ocultar -->
  <li>21</li>
  <!-- Ocultar -->
  <li>22</li>
  <!-- Ocultar -->
  <li>23</li>
  <!-- Ocultar -->
  <li>24</li>
  <!-- Ocultar -->
  <li>25</li>
  <!-- Ocultar -->
</ul>

Lo que importa realmente en el ejemplo es el jquery , donde primero obtendremos la posición de nuestro elemento usando la propiedad index, luego se lo asignamos a una variable para posterior hacer la lógica de seleccionar los elementos que están al costado y ocultar los demás. Explicado mas detallado, lo que obtengo es un numero al hacer $(this).index(); , con ese numero digo que usando eq me seleccione los elementos al costado ya que la lista en jquery cree que es un array por lo tanto restará una posición y sumara una posición para permitirse seccionar.

Espero te sirva saludos!!!

2
  • Gracias Sebastián. Utilizaré el código de @Samir que son menos lineas.
    – tomillo
    Commented el 29 may. 2018 a las 22:43
  • no te preocupes , el que te sirva más usalo, es a tu gusto. Commented el 30 may. 2018 a las 2:09
1

Con jQuery ocultas todos los li antes y después del activo así:

$(".active").nextAll().hide();
$(".active").prevAll().hide();

Y después muestras solo el anterior y el siguiente así:

$(".active").next().show();
$(".active").prev().show();
0

0 votar en contra

yo te recomendaria una etiqueta que ya existe quitando todos los li. Ademas es mucho mas rapido y creo que te puede servir, aunque no se de que va tu proyecto. la etiqueta details se despliega con un click.

<details>
 <summary>lo que vas a mostrar o lo que se ve </summary>
 <p>contenido oculto</p>
 <p>contenido oculto</p>
 <p>contenido oculto</p>
</details>

Alomejor es menos profesional, pero tambien depende como lo hagas en css y tal.Te recomendaria dividirlo en divs. un saludo.

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.