use jQuery para expandir/contraer la lista ul - tiene problemas

Estoy tratando de crear una lista de archivos de blogs que muestre todos los artículos por año y mes (que he hecho con PHP/MySQL)

Ahora estoy tratando de hacer que en la carga de la página, todos los años se colapsen excepto el último año/mes y también que cada uno se colapse/expanda al hacer clic.

Por el momento, mi función de clic de jQuery abrirá o cerrará todos los elementos li en lugar de solo en el que haga clic. Todavía soy bastante nuevo en jQuery, así que no estoy seguro de cómo hacer que solo afecte la sección de la lista en la que hago clic.

¡Cualquier ayuda sería grandiosa!

Aquí está mi código hasta ahora (la lista se genera a partir de bucles PHP/MySQL)

<ul class="archive_year">
<li id="years">2012</li>
    <ul class="archive_month">
        <li id="months">September</li>
            <ul class="archive_posts">
                <li id="posts">Product Review</li>
                <li id="posts">UK men forgotten how to act like Gentlemen</li>
                <li id="posts">What Do Mormons Believe? Ex-Mormon Speaks Out</li>
                <li id="posts">Here is a new post with lots of text and a long title</li>
            </ul>
        <li id="months">August</li>
            <ul class="archive_posts">
                <li id="posts">A blog post with an image!</li>
            </ul>
    </ul>
<li id="years">2011</li>
    <ul class="archive_month">
        <li id="months">July</li>
            <ul class="archive_posts">
                <li id="posts">New Blog!</li>
            </ul>
    </ul>
<li id="years">2009</li>
    <ul class="archive_month">
        <li id="months">January</li>
            <ul class="archive_posts">
                <li id="posts">Photography 101</li>
            </ul>
    </ul>
</ul>​

Y aquí está el jQuery hasta ahora:

$(document).ready(function() {

//$(".archive_month ul:gt(0)").hide();

$('.archive_month ul').hide();

$('.archive_year > li').click(function() {
    $(this).parent().find('ul').slideToggle();
});

$('.archive_month > li').click(function() {
    $(this).parent().find('ul').slideToggle();
});


});

Estaba experimentando con $(".archive_month ul:gt(0)").hide(); pero no funcionó como se esperaba, cambiaría el abierto y el cerrado.

¿Alguna ayuda/idea?

Además, aquí hay un violín para un ejemplo en vivo: http://jsfiddle.net/MrLuke/VNkM2/1/

preguntado el 18 de septiembre de 12 a las 17:09

Un consejo, las identificaciones DEBEN ser únicas. Los estás reutilizando, por ejemplo: id="years" & id="months". -

También tu interior ul las etiquetas deben ser hijos de li etiquetas. -

No tengo idea de lo que está tratando de hacer, pero como dice j08691, las identificaciones deben ser únicas, y tal vez esto VIOLÍN es lo que estás tratando de hacer? -

@adeneo: sí, eso es esencialmente lo que quería, excepto sin el efecto de acordeón. JohnKalberer & j08691 - gracias por los consejos - ¡errores tontos que pasé por alto! -

2 Respuestas

Primero sobre los problemas:

  1. ¡Los ID deben ser únicos!
  2. Tienes que anidar correctamente tu <li>-s

Y así es como puede resolver el problema: DEMO

jQuery

$('.archive_month ul').hide();

$('.months').click(function() {
    $(this).find('ul').slideToggle();
});

HTML (reparado)

<ul class="archive_year">
<li class="years">2012
    <ul class="archive_month">
        <li class="months">September
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
                <li class="posts">Article 2</li>
                <li class="posts">Article 3</li>
                <li class="posts">Article 4</li>
            </ul>
        </li>
        <li class="months">August
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</li>
<li class="years">2011</li>
    <ul class="archive_month">
        <li class="months">July
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</li>
<li class="years">2009</li>
    <ul class="archive_month">
        <li class="months">January
            <ul class="archive_posts">
                <li class="posts">Article 1</li>
            </ul>
        </li>
    </ul>
</ul>

Respondido el 18 de Septiembre de 12 a las 17:09

¡Gracias por esto! Y por arreglar el código de la lista - errores de colegial :s - señorlewk

Lo uso para mostrar el historial de facturas en mi ERP, funciona de maravilla:

  • lista muestra sólo el último evento (last li)
  • elemento "mostrar más" con recuento de eventos ocultos
  • onclick, muestra todos los eventos ocultos y oculta mi elemento "mostrar más"

En el siguiente ejemplo, se ha hecho clic en el elemento "mostrar más" de la segunda línea:

Historial de facturas ERP ul>li lista con elementos ocultos

Plantilla HTML/Smarty:

<td class="col-xs-2" id="iv-status-{$invoice.sale_invoice_id}">
    <ul class="history" id="history-{$invoice.sale_invoice_id}">
        {if $invoice.events|@count > 1}
            <li class="history-more">
                <i class="fal fa-ellipsis-h"></i> 
                afficher {$invoice.events|@count} évènements
            </li>
        {/if}
        <li class="history-hidden">
            <b>{$invoice.dates.created.timeline}</b><br>
            <i class="fal fa-file-plus"></i> Facture créée par {$invoice.log.employee.firstname}
        </li>
        {foreach $invoice.events as $ev}
            {if $ev.event == 'download'}
                <li class="history-hidden">
                    <b>{$ev.dates.timeline}</b><br>
                    <i class="fal fa-download"></i> Facture téléchargée par {$ev.employee.firstname}
                </li>
            {/if}
            {if $ev.event == 'print'}
                <li class="history-hidden">
                    <b>{$ev.dates.timeline}</b><br>
                    <i class="fal fa-print"></i> Facture imprimée par {$ev.employee.firstname}
                </li>
            {/if}
            ...
            {if $ev.event == 'close'}
                <li class="history-hidden">
                    <b>{$ev.dates.dateline}</b><br>
                    <i class="fal fa-file-check"></i> Facture clôturée par {$ev.employee.firstname}
                </li>
            {/if}
        {/foreach}
    </ul>
</td>

jQuery:

$('.history').each(function() {
    $('.history li:last-child')
        .addClass('history-last')
        .removeClass('history-hidden');
    $(this).children('li.history-more').click(function(e) {
        ul = $(this).parent('ul').attr('id');
        $('#' + ul).children('li.history-more').hide();
        $('#' + ul).children('li.history-hidden').show();
    });
});

CSS:

li.history-more {
    cursor: pointer;
}
li.history-hidden {
    display: none;
}

Respondido 19 Jul 21, 10:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.