Question

我正在尝试创建一个博客存档列表，按月和月显示所有文章（我用PHP / MySQL完成）

现在我正在努力使其在页面加载时，所有年份都会折叠，除了最近的年/月，并且每个年份都会在点击时折叠/展开。

目前我的jQuery点击功能将打开或关闭所有li元素，而不仅仅是我点击的元素。我仍然是jQuery的新手，所以我不确定如何使它只影响我点击的列表部分。

任何帮助都会很棒！

这是我到目前为止的代码（列表是从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>

到目前为止，这是jQuery：

$(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();
});


});

我正在试验$（“。archive_month ul：gt（0）”）。hide（）;但它没有按预期工作，它会切换开放和关闭。

任何帮助/想法？

此外，这里有一个实例的小提琴：http://jsfiddle.net/MrLuke/VNkM2/1/

Answer 1

首先讨论问题：

ID-s必须是唯一的！
您必须正确嵌套<li> - s

以下是解决问题的方法 - DEMO

<强> 的jQuery

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

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

HTML （已修复）

<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>

Answer 2

我用它来显示我的 ERP 中发票的历史记录，它就像一个魅力：

list 仅显示最后一个事件（最后一个 li）
带有隐藏事件计数的“显示更多”元素
onclick，显示所有隐藏的事件并隐藏我的“显示更多”元素

在下面的示例中，第二行“显示更多”元素已被点击：

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;
}

使用jQuery扩展/折叠ul列表 - 有问题

2 个答案: